Angular 使用 select 菜单过滤数据

Question

我想使用 select 菜单过滤数据 table。我已经填充了并且我有一个管道，虽然我一定是做错了什么，当我从下拉列表中 select 某些东西时，它只是清空组件 html 生成的数据 table。

<div>
<select [(ngModel)]="selectOpt" name="selectOpt" class="password-sort-select" >
<option>Select Team</option>
<option *ngFor="let team of teams" [ngValue]="team.team_id">{{team.team_name}}</option>
</select>
</div>

<ul class="company-display-data data-table passwords">
<li *ngFor="let password of passwords | filter: selectOpt" class="cf">
<a class="team-badge-wrapper" href="#"><span class="team-badge">{{password.team_name}}</span></a>
<span class="team-display-data team-description">{{password.description}}</span>
<span class="team-display-data team-url">{{password.url}}</span>
<span class="team-display-data team-username">{{password.username}}</span>
<span class="team-display-data team-password">{{password.password}}</span>
<a class="team-edit" routerLink="/detail/{{password.id}}"><span class="display-data">Edit</span></a>

</li>
</ul>

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

@Pipe({
name: 'filter'
})

export class FilterPipe implements PipeTransform {

transform(items: any, selectOpt?: any): any {
return selectOpt ? items.filter(opt => opt.password_id === selectOpt) : items;
}
}

我做错了什么？

Answer 1

当您 select 一个值

时，您的管道返回一个空数组

return selectOpt ? items.filter(opt => opt.password_id === selectOpt) : items;

请将opt.password_id与密码模型

匹配

您可能还想修复 "Select Team" 被 selected

时它什么都不显示的问题

return (selectOpt && selectOpt != 'Select Team') ? items.filter(opt => password_id === selectOpt) : items;

工作示例https://stackblitz.com/edit/angular-rb5vmu

Angular 使用 select 菜单过滤数据

Angular filter data with select menu

angular

angular-pipe