Question

显示数据时出现错误Error: _co.bellowContent is undefined。您可以在下面引用我的代码。显示数据时出现错误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

由于您将其定义为undefined，因此首先将其定义为undefined，以便处理未定义的错误。如下使用“安全导航”操作符

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

将bellowContent初始化为空对象的正确方法

 bellowContent = {};

STACKBLITZ DEMO

Answer 2

不要保持undefined为类型，请将* ngIf条件放入div

修改后的代码 https://stackblitz.com/edit/angular-zftsyc?file=src/app/app.component.html

Answer 3

在内容上使用ngIf尝试访问未定义对象的属性。它看起来比到处都有安全的导航操作员还干净。

<div *ngIf="bellowContent">
<p>id: {{ bellowContent.id }}</p>
<p>first: {{ bellowContent.first }}</p>
<p>last: {{ bellowContent.last }}</p>
<p>title: {{ bellowContent.title }}</p>
</div>

Answer 4

将bellowContent初始化为空对象{}而不是undefined：

bellowContent = {};

在进一步研究您的代码时，似乎不希望显示标签id，first等，直到用户单击其中的一行为止。在这种情况下，您可以使用

包装要显示的内容

<div *ngIf="bellowContent">
   ...
</div>

并将bellowContent的初始初始化保留为bellowContent:undefined

何时显示未定义的变量时出现错误

4 个答案: