В цикле NgFor с NgIf - PullRequest
Новая
       3

В цикле NgFor с NgIf

3 голосов
/ 05 марта 2019

Я делаю угловые и из бэкэнда у меня есть данные. Данные выглядят так: 

{
 name: 'Name',
 surename: 'Surename',
 position: 'Goalkeeper'
},
{
 name: 'Name',
 surename: 'Surename',
 position: 'Defender'
}

А в HTML у меня есть: 

<mat-option *ngFor="let player of players" [value]="player">
  <div *ngIf="player.position === 'Goalkeeper'">
             {{player.name}} {{player.surename}} ({{player.price}}M)
  </div>
</mat-option>

Но в результате я получаю свободное место после игроков, которые не находятся в состоянии ngIf ... В реальности выглядит так:

Изображение mat-option в сети

Я добавляю строки, чтобы лучше видеть свободное место на изображении.

Что я должен починить, чтобы удалить свободное место? Спасибо

Ответы [ 2 ]

2 голосов
/ 05 марта 2019

mat-option отображается независимо от плеера, меняется только его содержимое.

Рефакторинг выглядит следующим образом: 

<ng-container *ngFor="let player of players">
  <mat-option *ngIf="player.position === 'Goalkeeper'" [value]="player">
    {{player.name}} {{player.surename}} ({{player.price}}M)
  </mat-option>
</ng-container>

Идеальным решением будет использование ngFor и ngIf в mat-option, но невозможно применить 2 структурные директивы к одному и тому же элементу.В связи с этим вам необходимо «развернуть» шаблон в вышеприведенном.

1 голос
/ 05 марта 2019

Подход, предложенный Джотой, очень твердый.

Другой способ - создать свойство в классе компонентов, в котором уже есть вратари. 

get goalkeepers() {
    return this.players.filter(p => p.position === 'Goalkeeper');
}

Тогда вы можете перебирать их ?

...