Блог

У меня есть проблема, которая связана с моим *ngIf . У меня есть две кнопки, отображающие разные данные в одной таблице. Я фильтрую массив объектов. Проблема в том, что если я нажму на одну из этих кнопок, например «Dog», отобразятся правильные данные, но после того, как я нажму на «cat», столбцы будут пустыми. Кто — нибудь знает , что я делаю не так?

animal.ts

   cat: boolean;
  dog: boolean;

  animals: Animal[] = [
    {type: 'cat', name: 'snoopy', color: 'white'},
    {type: 'dog', name: 'spooch', color: 'black'}
  ];

chooseCat() {
    this.cat = true;
    this.dog = false;

    this.animals = this.animals.filter(d => {
      return d.type === 'cat'
    });
}

chooseDog() {
    this.cat = false;
    this.dog = true;

    this.animals = this.animals.filter(d => {
      return d.type === 'dog'
    });
}

  

animal.html

  <div class="col-xs-12" class="icon" (click)="chooseCat()">
      <img src="../assets/img/cat.png" class="icon;">
      cat
 </div>

 <div class="col-xs-12" class="icon" (click)="chooseDog()">
      <img src="../assets/img/dog.png" class="icon;">
      dog
 </div>


<table *ngIf="cat || dog">
<tr>
<td>name</td>
<td>color</td>
</tr>

<tr *ngFor="let a of animals">
<td>{{a.name}}</td>
<td>{{a.color}}</td>
</tr>
</table>

  

ДЕМОНСТРАЦИЯ

ваше условие фильтра неверно измените тип и создайте еще один массив и подтвердите его в html

  this.animals2 = this.animals.filter(d => {
      return d.type == 'cat'
    });
  

в html как

 <tr *ngFor="let a of animals2">
<td>{{a.name}}</td>
<td>{{a.color}}</td>
</tr>
  

или другое решение — пользовательский канал

добавить пользовательский канал

 import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: any[], args: string): any {
    console.log(value)
    return value.filter(x=>x.type==args);
  }

}
  

создать typee в качестве параметра в компоненте

 typee:string;
  

в html изменить typee

  <div class="col-xs-12" class="icon" (click)="typee='cat'">
      <img src="../assets/img/cat.png" class="icon;">
      cat
 </div>

 <div class="col-xs-12" class="icon" (click)="typee='dog'">
      <img src="../assets/img/dog.png" class="icon;">
      dog
 </div>
  

затем назначьте пользовательский канал таблице

 <tr *ngFor="let a of animals | filter : typee">
  <td>{{a.name}}</td>
  <td>{{a.color}}</td>
</tr>
  

При первом нажатии на «Cats» и фильтрации вы исключаете всех собак из массива «this.animals». Когда вы затем нажимаете на ‘Dogs’, вы фильтруете всех cats из того же массива, таким образом, полностью очищая его. Если вы хотите отобразить всех собак или кошек, вам лучше выполнить глубокую копию вашего исходного массива, а не фильтровать его.

Вы фильтруете по «имени» в своих методах. Это должно быть ‘type’.

Попробуйте это:

 chooseCat() {
  this.cat = true;
  this.dog = false;
  this.animals = this.animals.filter(d => {
    return d.type === 'cat'
  });
}