我有以下代碼，我希望每當列表為空時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>問題是，當列表為空時，不會顯示任何內(nèi)容，但是一旦我向列表添加內(nèi)容，我就可以看到我添加的元素的名稱。我也嘗試過ngIf在 a 中使用div，然后ng-template用 else 語句添加另一個。
2 回答
UYOU
TA貢獻1878條經(jīng)驗 獲得超4個贊
您正在將表綁定到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
呼如林
TA貢獻1798條經(jīng)驗 獲得超3個贊
如果列表始終存在（即使大小為 0），那么您應(yīng)該不會遇到任何問題。如果它可以是未定義的，那么您需要使用可選鏈接。
{{ list?.length ? element.name : 'the list is empty' }}- 2 回答
- 0 關(guān)注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消