无法使用角度 2+ 中的复选框进行过滤

Question

我有一个显示参与者列表的项目。我想做的是由提供者使用复选框实时过滤它们。

参与者：

[
    { 'name': 'test1', 'provider' : {'name': 'provider1'}}
    { 'name': 'test2', 'provider' : {'name': 'provider2'}}
    { 'name': 'test3', 'provider' : {'name': 'provider3'}}
    { 'name': 'test4', 'provider' : {'name': 'provider1'}'}
 ..
]

我的html模板是：

这里是显示提供者的复选框列表。我用它来过滤参与者。

<div class="form-group" *ngFor="let provider of providers">
    <input type="checkbox" name="providers" value="{{ provider.name }}" [(ngModel)]="provider.checked"
    (change)="displayParticipantsByProvider($event.target.value)">{{ provider.lastName }}
</div>

这是我展示参与者的方式：

<ul>
    <li *ngFor="let p of participants">{{ p.name }} - {{ p.provider.name }} </li>
</ul>

而我在组件中的过滤功能是：

displayParticipantsByProvider(filterVal: any) {
    if (filterVal === '0') {
      this.participants = this.cathechParticipants;
    } else {
      this.participants = this.participants.filter((item) => item.provider.includes(filterVal));
    }
}

此过滤器仅返回选中的项目。例如，如果从复选框中选择了提供者 1，它会返回我有提供者 1 的参与者。如果我从复选框中选择 provider2，它只会返回包含 provider2 的参与者。我的目标是加载它们，因为它们都被选中。那么，如何使用允许我过滤的多个复选框加载参与者？

Answer 1

跟踪选定的项目并将其与提供者列表进行匹配，并将其添加到参与者数组中。

以下示例是使用 Angular 材质完成的。

export class AppComponent {
  selectedProviders: any[];
  providers: any[];
  participants: any[];

  providerChange() {
    this.participants = [];
    for (const sp of this.selectedProviders) {
      for (const p of this.providers) {
        if (sp.provider.name === p.provider.name) {
          this.participants.push(p);
        }
      }
    }
  }

  ngOnInit() {
    this.providers = [
      { 'name': 'test1', 'provider': { 'name': 'provider1' } },
      { 'name': 'test2', 'provider': { 'name': 'provider2' } },
      { 'name': 'test3', 'provider': { 'name': 'provider3' } },
      { 'name': 'test4', 'provider': { 'name': 'provider1' } }
    ]
  }
}

HTML：

<mat-list-item class="primary-imenu-item" role="listitem">
    <mat-form-field class="select-form">
        <mat-select 
        placeholder="Providers" 
        name="providers" 
        class="filter-select" 
        [(ngModel)]="selectedProviders"
        (change)="providerChange()"
        multiple>
          <mat-option *ngFor="let p of providers" [value]="p">
            {{p.provider.name}}
          </mat-option>
        </mat-select>
    </mat-form-field>
  </mat-list-item>

  <ul>
    <li *ngFor="let p of participants">{{p.name}}</li>
  </ul>

StackBlitz

Answer 2

您可以检查提供者列表并查看哪些提供者将“已检查”属性设置为 true（您将使用 ngModel 绑定）

Answer 3

HTML 代码

<div class="form-group" *ngFor="let provider of providers;let i = index">
  <input type="checkbox" name="providers" value="{{ provider.name }}" [(ngModel)]="provider.checked"
  (change)="displayParticipantsByProvider()"><span class="font-weight-bold">{{ provider.name }}</span>
</div>
<ul>
  <li *ngFor="let p of participants">{{ p.name }} - {{ p.provider.name }} </li>
</ul>

TS 代码

participants = [];
 providers =  [
    { 'name': 'test1', 'provider' : {'name': 'provider1'}, checked: false},
    { 'name': 'test2', 'provider' : {'name': 'provider2'}, checked: false},
    { 'name': 'test3', 'provider' : {'name': 'provider3'}, checked: false},
    { 'name': 'test4', 'provider' : {'name': 'provider1'}, checked: false}
 ];
displayParticipantsByProvider() {
    this.participants = this.providers.filter((item, idx) => {
      if (item.checked) {

        return item;
      }
    });

  }