带有选择菜单的角度过滤器数据

Question

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

<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

当您选择一个值时，您的管道返回一个空数组

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

请将 opt.password_id 与密码模型匹配

选择“选择团队”

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

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