троичный оператор не работает в angular - PullRequest
Новая
       3

троичный оператор не работает в angular

0 голосов
/ 04 апреля 2020

У меня есть следующий код, и я хочу, чтобы всякий раз, когда список пуст, td отображает текст и, как только он получает некоторые элементы, показывает element.name, но он работает только тогда, когда список не пуст (я использую console.log (список), чтобы убедиться, что длина равна 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 в div, а затем добавить еще один ng-template с оператором else.

Ответы [ 2 ]

2 голосов
/ 04 апреля 2020

Вы привязываете свой стол к 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>

DEMO: https://stackblitz.com/edit/angular-at5wet

0 голосов
/ 04 апреля 2020

Если список присутствует всегда (даже размер 0), у вас не должно быть проблем. Если оно может быть неопределенным, вам нужно использовать необязательную цепочку. 

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