无法使用 angular 中的复选框进行过滤 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));
    }
}

此过滤器 returns 仅选中的项目。例如，如果提供者 1 是 select 从复选框中编辑的，它 returns 参与者其中我有提供者 1。如果我从复选框 select provider2 中选择，它 returns 只有 provider2 参与其中。我的目标是加载它们，因为它们都是 selected。那么，如何使用允许我过滤的多个复选框来加载参与者？

Answer 1

您可以查看提供商列表，看看哪些提供商的 'checked' 属性设置为 true（您将使用 ngModel 绑定）

Answer 2

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;
      }
    });

  }

Answer 3

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

下面的例子是用Angular Material完成的。

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

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

Can't filter using checkboxes in angular 2+

filter

typescript

angular-pipe

angular