ngIf gives 'TypeError: Cannot read property 'visit' of undefined' when indexing-CodePudding

I have an ngIf inside an ngFor and I use the index to check whether the item at that index of an array is equal to a certain value but whenever I try to index anything it gives a

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\@angular\compiler-cli\src\ngtsc\typecheck\src\expression.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>

I don't understand how temp is undefined since it is hardcoded? rough stackblitz example: https://stackblitz.com/edit/angular-ivy-xdk4jr?file=package.json let me know if other files are required.

CodePudding user response：

I've faced a similar issue and these steps helped:

Delete your node_modules folder
Run npm cache clean --force
Run npm install
Run ng s

CodePudding user response：

you have a logic problem with your code.

your temp array is fixed list with 7 items

tasks is unknown number of items.

you are looping through tasks and (for some reason) getting the index item of the task element to compare. meaning if you have more than 7 tasks, you will be trying to access temp[7] which is undefined.

it would be better code if you set up your data like this:

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

and then html:

*ngFor= "let task of taskItems"

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

or if you don't like that solution, add this to the html:

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