Tengo un ngIf dentro de un ngFor y uso el índice para verificar si el elemento en ese índice de una matriz es igual a un cierto valor, pero cada vez que intento indexar algo, da un
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>No entiendo cómo la temperatura no está definida ya que está codificada. ejemplo aproximado de stackblitz: https://stackblitz.com/edit/angular-ivy-xdk4jr?file=package.json déjeme saber si se requieren otros archivos.
He enfrentado un problema similar y estos pasos ayudaron:
node_modulesnpm cache clean --forcenpm installng susted tiene un problema de lógica con su código.
su matriz temporal es una lista fija con 7 elementos
tareas es un número desconocido de elementos.
está recorriendo las tareas y (por alguna razón) obteniendo el elemento de índice del elemento de la tarea para comparar. lo que significa que si tiene más de 7 tareas, intentará acceder a temp[7], que no está definido.
sería mejor código si configura sus datos de esta manera:
var taskItems = [{task: task1, status: 'Complete;}, //etc. ];y luego HTML:
*ngFor= "let task of taskItems" *ngIf="task.status == 'Complete'"o si no le gusta esa solución, agregue esto al html:
*ngIf="temp && temp.length > index && temp[index]==='Complete'"