ngIf 在索引到数组时给出 'TypeError: Cannot read property 'visit' of undefined'答案

【问题标题】：ngIf gives 'TypeError: Cannot read property 'visit' of undefined' when indexing into arrayngIf 在索引到数组时给出 'TypeError: Cannot read property 'visit' of undefined'
【发布时间】：2022-01-11 19:31:49
【问题描述】：

我在 ngFor 中有一个 ngIf，我使用索引来检查数组的该索引处的项目是否等于某个值，但是每当我尝试索引任何东西时，它都会给出一个

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>

我不明白 temp 是如何未定义的，因为它是硬编码的？粗略的 stackblitz 示例：https://stackblitz.com/edit/angular-ivy-xdk4jr?file=package.json 如果需要其他文件，请告诉我。

【问题讨论】：

您的错误是无法读取属性“访问”，但您的代码中没有访问
是的，我也很困惑为什么会这样说
它说明了 AstTranslator.translate，也许你应该检查你的库...你确定错误在你提供的文件中吗？
你能为此搭建一个正在运行的堆栈闪电战吗？
它适用于 stackblitz，这很奇怪。我想这可能是我的节点模块，但我不确定 AstTranslator 是什么以及做什么

标签： javascript angular

【解决方案1】：

你的代码有逻辑问题。

您的 temp 数组是包含 7 个项目的固定列表

tasks 是未知数量的项目。

您正在循环执行任务并（出于某种原因）获取要比较的任务元素的索引项。这意味着如果您有超过 7 个任务，您将尝试访问未定义的 temp[7]。

如果您像这样设置数据会更好：

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

然后是html：

*ngFor= "let task of taskItems"

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

或者如果您不喜欢该解决方案，请将其添加到 html：

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

【讨论】：

我只关注前端，后端由其他人处理。我只按照设置完所有内容时返回的结构创建了模拟数据。并且两个数组的长度相同。
显然它们的长度不同。您可以将此代码添加到 html：*ngIf="temp && temp.length > index && temp[index]==='Complete'"。这应该可以解决错误。
它不能修复它，即使我只是做 temp[0] 它也会给出同样的错误。我知道可能是我的库导致了问题，但即使删除并重新安装也没有改变它

【解决方案2】：

我遇到了类似的问题，这些步骤有所帮助：

删除您的node_modules 文件夹
运行npm cache clean --force
运行npm install
运行ng s

【讨论】：

谢谢，但它对我不起作用:(