带有Angular Material的Angular 12尝试根据选中的复选框过滤列表

Question

我正在尝试根据检查的大陆过滤国家列表。

我相信事情的模板方面是在一个好地方：

ngOnInit() {
  this.filteredCountries = this.countries;
  this.selectedContinents.valueChanges.subscribe(selectedValue => {
    this.filteredCountries = this.countries.filter(country => {
      return this.selectedContinents.value?.includes(country.continent);
    });
  }
}

<mat-form-field class="country-code-dialog-search-container">
  <input matInput (change)="onChangeContinentCheckBox()" placeholder="Filter by Continents" cdkFocusInitial>
  <mat-select placeholder="Filter by Continents" multiple>
    <mat-option *ngFor="let continent of getContinents()">{{continent}}</mat-option>
  </mat-select>
</mat-form-field>

<section class="example-section" *ngFor="let country of filteredCountries">
 <span class="example-list-section">
   <mat-checkbox class="example-margin">
     {{country.name}} ({{country.iso3}}) <span>{{country.emoji}}</span>
   </mat-checkbox>
 </span>
</section>

我见过这样的事情：

<mat-options type="checkbox" *ngFor="let continent of getContinents() | selectedContinents">{{continent}}</mat-options>

在函数中：

onChangeContinentCheckBox() { 
 this.countries.filter('selectedCountries', function(country) {
   return country.continent === /* logic for obtaining checked selection */
 });
}

但这只是破坏了我的应用程序，这意味着 mat-form-field 不再呈现，国家名称、ISO 和表情符号也不再呈现，所以它只是一个空的复选框呈现列表。

所以这是我在 Stackblitz 上的一个例子：

https://stackblitz.com/edit/angular-qpxrkm-6vbpmh?file=src%2Fapp%2Fselect-multiple-example.html,src%2Fapp%2Fselect-multiple-example.ts

Answer 1

稍作修改，您可以将FormControl 仅用于角度材料的select，然后订阅它的valueChanges，在其中您可以过滤countries 数据，查看代码中的cmets

工作示例

https://stackblitz.com/edit/angular-qpxrkm?file=src/app/select-multiple-example.html

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';


@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
})
export class SelectMultipleExample implements OnInit{
//you need to create the FormControl that will hold the selections made on the dropdown
//this will be used to filter the countries
  selectedContinent = new FormControl('');
  
  continents: string[] = ['America','Antartica'];
  countries: any[]=[{continent:'America', country:'USA'},{continent:'America', country:'Mexico'},{continent:'Antartica', country:'New Zeland'}];
  
  filteredContries : any[] = [];

  ngOnInit(){
  //FormControls have a valueChanges that you can subscribe to and apply your filter
    this.selectedContinent.valueChanges.subscribe(selectedValue=>{
    
      this.filteredContries = this.countries.filter(c=>{
      //FormControls have a `.value` that holds the selected(in this case) values,
      //in this case it's an array of strings, that's why we use the `includes` to look a each 
      //of the countries continent
        return this.selectedContinent.value?.includes(c.continent);
      });
    });
  }
}

<mat-form-field appearance="fill">
  <mat-label>Continents</mat-label>
  <mat-select [formControl]="selectedContinent" multiple>
    <mat-option *ngFor="let continent of continents" [value]="continent">{{continent}}</mat-option>
  </mat-select>
</mat-form-field>

<code>
{{selectedContinent.value|json}}
</code>
<code>
{{filteredContries|json}}
</code>