一个元素上的 *ngIf 错误不允许 *ngFor 在另一个元素上正常工作

Question

一个元素中变量的初始化和我一直忽略的控制台中的错误，在另一个元素的其他地方造成了问题。为什么 Angular 会这样？

当我不初始化与 *ngIf 一起使用的另一个变量时，javascript 在测试其长度时抛出“未定义”（预期）。但这也会导致 *ngFor 无法正常用于下拉菜单（没有加载数据 - 意外）。顺便说一句，我意识到，这不仅仅发生在 datalist 上。如果 *ngIf 在此代码中有错误，*ngFor 在任何组件上都会失败。

那么，当 *ngIf 时，为什么 *ngFor 会因为下拉（第一个元素）失败 无法在表（另一个元素）上验证条件？我是不是该 以不同的方式思考这个问题，Angular 是一个框架，并且 如果我在管理错误方面做得不好，可能会表现不正常 它的构造？

下面是重现错误的代码。取消注释建议的行，错误就会消失...

HTML

<div class="row">
    <div class="col">
        <input
          type="text" class="form-control" list="tktnum"
          placeholder="Ticket Number..." [(ngModel)]="tktNum"
        >
        <datalist id="tktnum">
            <option *ngFor="let a of tktVals">{{a.TicketNo}}</option>
        </datalist>
    </div>
</div>
<br><br>

<div class="row">
    <div class="col">
        <table class="table table-hover table-striped table-dark table-bordered"
            *ngIf="reportElements.length > 0">
            <thead>
                <tr>
                    <th scope="col">Ticket Number</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let _ of reportElements">
                    <td>{{ _.F1 }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

打字稿

import { Component, OnInit, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  reportElements: [{F1: 3}];

  tktVals: Array<{ TicketNo: string }> = [{ TicketNo: "1" }, { TicketNo: "2" }];
  tktNum: any;

  constructor() {}

  ngOnInit(): void {
    this.tktVals = [{ TicketNo: "1" }, { TicketNo: "2" }];
    
    //Uncomment the following line of code and it will start working as expected.
    //this.reportElements = [{F1: 3}];

    console.log(this.reportElements.length);
  }
}

Answer 1

问题在于 reportElements 最初是 undefined。你实际上不能使用 "undefined 的长度，因为它没有长度属性，你也不能迭代它，因为 undefined 是不可迭代的。有多种方法可以解决它：

1. 给reportElements一个空数组的初始值。但在这种情况下，您需要注意删除/更改其类型表示法：

    reportElements: [{F1: 3}] = [];
   

2. 将整个表格html包装到ng-container中：

    <ng-container *ngIf="reportElements">
        <table></table>
    </ng-container>
   

3. 将表中已有的*ngIf改为如下：

    *ngIf="reportElements && reportElements?.length > 0"
   

当模板表达式发生错误时，它会使同一模板中的所有其他表达式失败。这就是为什么你的表和选择都坏了。