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

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">&nbsp; <ng-container matColumnDef="name">&nbsp; &nbsp; <th mat-header-cell *matHeaderCellDef>header</th>&nbsp; &nbsp; <td mat-cell *matCellDef="let element">&nbsp; &nbsp; &nbsp; {{element.name}}&nbsp; &nbsp; </td>&nbsp; </ng-container>&nbsp; <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>&nbsp; <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr></table><p *ngIf="!list.length">&nbsp; the list is empty</p>三元表达式在 Angular 中也可以工作。尝试这个：<p>{{list.length ? 'has rows' : 'does not have rows'}}</p>演示： https:&nbsp;//stackblitz.com/edit/angular-at5wet

Answer 2

如果列表始终存在（即使大小为 0），那么您应该不会遇到任何问题。如果它可以是未定义的，那么您需要使用可选链接。{{&nbsp;list?.length&nbsp;?&nbsp;element.name&nbsp;:&nbsp;'the&nbsp;list&nbsp;is&nbsp;empty'&nbsp;}}