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

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

1 个答案: