Блог

У меня есть ngIf внутри ngFor, и я использую индекс, чтобы проверить, равен ли элемент в этом индексе массива определенному значению, но всякий раз, когда я пытаюсь что-либо проиндексировать, он выдает

 Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
TypeError: Cannot read property 'visit' of undefined 
at AstTranslator.translate (<projdirectory>/node_modules@angularcompiler-clisrcngtsctypechecksrcexpression.js:81:24)
 

 progress.component.ts 
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-progress',
    templateUrl: './progress.component.html',
    styleUrls: ['./progress.component.scss']
})
export class ProgressComponent implements OnInit {
    temp = [
             "Complete",
            "NotAttempted",
            "NotAttempted",
            "NotAttempted",
            "NotAttempted",
            "NotAttempted",
            "NotAttempted" 
           ]
    tasks = [some array of same length]
    constructor() { }

    ngOnInit(): void {
    }

}
 

 progress.component.html

<div class="container">
    <div class="wrapper">
      
        <table class = "items">
            <thead>
                <tr class = "header-row">
                    <th class = "title-header">Title</th>
                    <th class = "due-header">Due Date</th>
                    <th class = "status-header">Status</th>
                </tr>
            </thead>
            <tbody> 
                <tr *ngFor="let task of tasks; let index = index">
                    <td>{{ task.title }}</td>
                    <td>{{ task.dueDate}}</td>
                    <td>
                       <div class = "complete" *ngIf="temp[index]==='Complete'">Complete </div>
                    </td> 
                </tr>
            </tbody>
        </table>
    </div>
</div>
 

Я не понимаю, как temp не определен, поскольку он жестко запрограммирован?
пример грубого стекирования: https://stackblitz.com/edit/angular-ivy-xdk4jr?file=package.json
дайте мне знать, если требуются другие файлы.

Я столкнулся с аналогичной проблемой, и эти шаги помогли:

• Удалите свою node_modules папку
• Выполнить npm cache clean --force
• Выполнить npm install
• Выполнить ng s

у вас логическая проблема с вашим кодом.

ваш временный массив представляет собой фиксированный список из 7 элементов

задачи — это неизвестное количество элементов.

вы перебираете задачи и (по какой-то причине) получаете элемент индекса элемента задачи для сравнения. это означает, что если у вас более 7 задач, вы будете пытаться получить доступ к temp [7], который не определен.

было бы лучше, если бы вы настроили свои данные следующим образом:

 var taskItems = [{task: task1, status: 'Complete;},
  //etc.
];
 

а затем html:

 *ngFor= "let task of taskItems"

*ngIf="task.status == 'Complete'"
 

или, если вам не нравится это решение, добавьте это в html:

 *ngIf="temp amp;amp; temp.length > index amp;amp; temp[index]==='Complete'"