CODEWITHSUNDEEP
htmlangular
yorozuya
yorozuya

Reputation: 15

datas not showing in tables when change occurs, angular

I've got a problem that is linked to my *ngIf. I've got two buttons displaying different data in the same table. I'm filtering an array of object. The problem is that if I click on one of this button like "Dog" the correct data is displayed but after if I click on "cat" the columns will be empty. Does anyone know what I'm doing wrong ?

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>

Upvotes: 1

Views: 68

Answers (3)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17620

Demo

your filter condition is wrong change to type and create one more array and assing it in html

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

in html like

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

or another solution is custom pipe

add custom pipe

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);
  }

}

create typee as parameter in component

typee:string;

in html change 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>

then assign custom pipe to table

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

Upvotes: 1

user353955
user353955

Reputation:

You are filtering on 'name' in your methods. That should be 'type'.

Try this:

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

Upvotes: 0

Tim Lepage
Tim Lepage

Reputation: 872

When you click on 'Cats' and filter the first time you exclude all dogs from the 'this.animals' array. When you then click on 'Dogs' you filter all cats from the same array thus emptying it completely. If you want to display all the dogs or cats you should rather do a deepCopy of your original array and not filtering it.

Upvotes: 0

Related Questions