Javascript 一个元素上的*ngIf出错，无法让*ngFor在另一个元素上正常工作

一个元素中变量的初始化和控制台中我一直忽略的错误在另一个元素的其他地方造成了问题。为什么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>

{{a.TicketNo}}



车票号码
{{{{.F1}}

Typescript

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);
  }
}

从“@angular/core”导入{Component，OnInit，VERSION}”；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent实现OnInit{
reportElements:[{F1:3}]；
tktVals:Array=[{TicketNo:1}，{TicketNo:2}]；
tktNum：任何；
构造函数（）{}
ngOnInit（）：void{
this.tktVals=[{TicketNo:1}，{TicketNo:2}]；
//取消注释以下代码行，它将按预期开始工作。
//this.reportElements=[{F1:3}]；
log（this.reportElements.length）；
}
}

问题在于reportElements最初是未定义的。实际上不能使用“undefined”的长度，因为它没有长度属性，也不能对其进行迭代，因为undefined不可迭代。有多种方法可以解决此问题：

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

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

将整个表格html包装到ng容器中：

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

---

当模板表达式中出现错误时，会导致同一模板中的所有其他表达式失败。这就是为什么您的表和select都被破坏的原因。

我喜欢您的建议。但是，您能否告诉我，一个地方的*ngIf与另一个地方的*ngFor有什么关系？我认为它们不应该相互交互，如果其中一个失败，它将被删除应该对另一个没有影响。我遗漏了什么？我已经更新了答案。我也这么认为，这个理论有参考价值吗？

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