Reputation: 15
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
Reputation: 17620
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
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
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