Angular show Не найдено данных при сбое ngIf внутри ngfor

Question

У меня есть массив, я отображаю его в виде списка и применяю некоторые условия для его фильтрации. Я хочу показать, что при сбое условия данные не найдены.

.ts

  @Input() Minage;
  @Input() Gender;
   name = '';

 items = [
          {name:'name01' , age : 14, gender : 'male'},
          {name:'name02' , age : 25, gender : 'female'},
          {name:'name03' , age : 24, gender : 'male'},
          {name:'name04' , age : 16, gender : 'female'},
          {name:'name05' , age : 24, gender : 'male'},
      ]

. html

     <p>
     <input type="text" [(ngModel)]="name" (ngModelChange)="name"/>
    </p>

    <p *ngFor="let item of items">
       <ng-container  *ngIf='item.name.toLowerCase().indexOf(name.toLowerCase()) !== -1 && 
             item.age > Minage && item.gender === Gender'>

               {{item.name}}

       </ng-container>

    </p>

Input Minage & Gender являются значениями Dynami c.

Приведенный выше код отлично работает для фильтра поиска. Но я не смог показать данные не найдены. Как показать, что данные не найдены, когда условие поиска не выполнено в массиве?

Answer 1

Вместо выполнения сложных операций на вашем HTML, я бы порекомендовал выполнить их в модели. Отфильтруйте элементы в модели и свяжите результаты с HTML.

. Затем вам нужно будет отфильтровать элементы всякий раз, когда свойства @Input() изменяются в ngOnChanges() или при вводе name. меняется.

@Input() Minage;
@Input() Gender;

name = '';
items = [
  {name:'name01' , age : 14, gender : 'male'},
  {name:'name02' , age : 25, gender : 'female'},
  {name:'name03' , age : 24, gender : 'male'},
  {name:'name04' , age : 16, gender : 'female'},
  {name:'name05' , age : 24, gender : 'male'},
];
results = this.items.slice();

ngOnChanges(): void {
  this.filterItems();
}

onNameChange(): void {
  this.filterItems();
}

filterItems(): void {
  this.results = this.items.filter(item => {
    return item.name.toLowerCase().indexOf(this.name.toLowerCase()) !== -1 
      && item.age > this.Minage && item.gender === this.Gender;
  });
}

И тогда ваш HTML становится простым:

<p>
  <input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()" />
</p>

<p *ngFor="let item of results">
  {{item.name}}
</p>
<p *ngIf="results.length === 0>
  No results found
</p>