三元运算符在角度中不起作用

Question

我有以下代码，我希望每当列表为空时td显示文本，一旦获得一些元素，就显示但element.name它仅在列表不为空时才有效（我使用 console.log(list) 来确保长度为0)<table mat-table [dataSource]="list" class=" w-100">  <ng-container matColumnDef="name">    <th mat-header-cell *matHeaderCellDef>header</th>    <td mat-cell *matCellDef="let element">    {{ list.length ? element.name : 'the list is empty' }}    </td>  </ng-container></table>问题是，当列表为空时，不会显示任何内容，但是一旦我向列表添加内容，我就可以看到我添加的元素的名称。我也尝试过ngIf在 a 中使用div，然后ng-template用 else 语句添加另一个。

Answer 1

您正在将表绑定到list. 如果列表为空，则表中有 0 行，并且三元表达式永远不会运行。仅当您有一个非空列表时，您的三元表达式才会运行。

相反，使用*ngIf隐藏表格并显示空消息。

<table mat-table [dataSource]="list" class=" w-100" *ngIf="list.length">

  <ng-container matColumnDef="name">

    <th mat-header-cell *matHeaderCellDef>header</th>

    <td mat-cell *matCellDef="let element">

      {{element.name}}

    </td>

  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

<p *ngIf="!list.length">

  the list is empty

</p>

三元表达式在 Angular 中也可以工作。尝试这个：

<p>{{list.length ? 'has rows' : 'does not have rows'}}</p>

演示： https: //stackblitz.com/edit/angular-at5wet

Answer 2

如果列表始终存在（即使大小为 0），那么您应该不会遇到任何问题。如果它可以是未定义的，那么您需要使用可选链接。

{{ list?.length ? element.name : 'the list is empty' }}