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.
I've faced a similar issue and these steps helped:
node_modules foldernpm cache clean --forcenpm installng syou 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'"