angular - 当显示时出现 undefined variable 错误

Question

我在显示数据时遇到错误错误:_co.bellowContent未定义。你可以引用我下面的代码。显示数据时出现错误 Error: _co.bellowContent is undefined 。您可以引用下面我的代码。

app.component.html

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Title</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let tableRow of table" (click)="open(tableRow)">
      <th scope="row">{{tableRow.id}}</th>
      <td>{{tableRow.first}}</td>
      <td>{{tableRow.last}}</td>
      <td>{{tableRow.title}}</td>
    </tr>
  </tbody>
</table>

<div>
<p>id: {{ bellowContent.id }}</p>
<p>first: {{ bellowContent.first }}</p>
<p>last: {{ bellowContent.last }}</p>
<p>title: {{ bellowContent.title }}</p>
</div>

和

app.component.ts

  bellowContent:undefined
  table = [
  {
    "id": 1,
    "first":"Robin",
    "last": "William",
    "title": "back end developer"
  },{
    "id": 2,
    "first":"Mark",
    "last": "Thornton",
    "title": "front end developer"
  },{
    "id": 3,
    "first":"Tary",
    "last": "Huction",
    "title": "front end developer"
  }
]


  open(tableRow) {
      this.bellowContent = tableRow
  }
}

这是我在 stackBlitz 中的代码

Answer 1

由于您将其定义为未定义，因此它首先将是未定义的，以便处理未定义的错误。使用安全导航运算符如下，

<p>id: {{ bellowContent?.id }}</p>
<p>first: {{ bellowContent?.first }}</p>
<p>first: {{ bellowContent?.last }}</p>
<p>first: {{ bellowContent?.title }}</p>

也是将波纹管内容初始化为空对象的正确方法

 bellowContent = {};

STACKBLITZ DEMO