如何在使用(更改)事件时更改数据。我正在尝试通过匹配值更改图库项目,默认情况下我想显示所有图库项目
public items = [{
value: 'All',
name: 'All Items'
},
{
value: 'Photos',
name: 'Photo Items'
},
{
value: 'Video',
name: 'Video Items'
},
];
<div *ngFor="let item of items" class="nav-li">
<ul>
<li class="value" [value]="item.value"><a href="">{{item.value}}</a></li>
</ul>
</div>
<div class="gallery">
<div *ngFor="let item of items" class="card">
<div class="data">{{item.name}}</div>
</div>
</div>
如果单击照片更改为显示照片数据,则显示所有项目。
最佳答案
Demo这是带有管道的 html
<div *ngFor="let item of items | customPipe : filter" class="card">
<div class="data">{{item.name}}</div>
</div>
在组件中创建过滤器值作为初始“全部”
filter='All'
在列表中给出每个li的点击方法
<ul>
<li class="value"(click)="onChange(item.value)" [value]="item.value"><a href="">{{item.value}}</a></li>
</ul>
在组件中
onChange(value){
this.filter=value;
}
这是管道示例
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
transform(row: any[],filter:string): any {
return row.filter(x=>filter=='All' || x.value==filter);
}
}
关于angular - 如何使用 Angular 8 中的更改事件更改数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62496469/