根据另一个 mat-select 的值显示不同的 mat-options

Question

我有两个垫子-select；您在不同大陆之间选择的第一个。第二个 mat-select 有国家作为选项。我的问题是，例如，如果我在第一个 mat-select 上选择亚洲作为我的选项，我只希望亚洲国家在第二个 mat-select 中显示为选项，而不是其他国家/地区。

<div class="form">
 <mat-form-field>
  <mat-label>Continents</mat-label>
  <mat-select>
   <mat-option *ngFor="let continent of formData" [value]="continent.Continent">{{ continent.Continent }}</mat-option>
  </mat-select>
 </mat-form-field>

 <mat-form-field>
  <mat-label>Countries</mat-label>
  <mat-select>
   <mat-option *ngFor="let country of formData" [value]="country.Countries">{{country.Countries }}</mat-option>
  </mat-select>
 </mat-form-field>
</div>

这是我在 Typescript 中的表单数据

export const formData = [
{
 Continent: "Africa",
 Countries: [
  "Nigeria",
  "Egypt",
  "Ethiopia"
 ]
},
{
 Continent: "Europe",
 Countries: [
  "Sweden",
  "Italy",
  "Hungary"
 ]
},
{
 Continent: "North America",
 Countries: [
  "United States of America",
  "Canada",
  "Mexico"
 ]
},
{
 Continent: "South America",
 Countries: [
  "Peru",
  "Argentina",
  "Colombia"
 ]
},
{
 Continent: "Asia",
 Countries: [
  "Malaysia",
  "Iran",
  "Japan"
 ]
},
{
 Continent: "Australia/Oceania",
 Countries: [
  "Fiji",
  "Australia",
  "New Zealand"
 ]
}
];

Answer 1

我对 Angular 不是很熟悉，但据我所知，您似乎想要检索 <mat-select> 的值。执行此操作的最佳方法是使用 Angular 中的双向绑定语法，如 here 所述。您还需要更改您的国家/地区选择器，以便它根据所选大洲过滤结果。

根据以上内容，在您的示例中它看起来像这样：

在你的组件中。html:

...
  <mat-select [(value)]="selectedContinent">
     <mat-option *ngFor="let continent of formData" [value]="continent.Continent">{{ continent.Continent }}</mat-option>
  </mat-select>
...
  <mat-select>
   <mat-option *ngFor="let continent of filteredFormData" [value]="continent .Countries">{{country.Countries }}</mat-option>
  </mat-select>
...

在你的组件.ts:

...
  selectedContinent?: string;
  get filteredFormData() {
    // selectedContinent would be undefined if no option is selected
    // therefore, we return all of the continents
    if (!selectedContinent) return formData;
    // filter out all of the continents that don't match the criteria
    return formData.filter(entry => entry.Continent === this.selectedContinent);
  }
...

或者，您可以使用 *ngIf.

将过滤内嵌到第二个选择器中

Answer 2

为 selected 条目创建变量（例如 selectedContinent）并在第一个 select 中绑定它，然后在第二个 select 中使用它来获取国家：

<div class="form">
 <mat-form-field>
  <mat-label>Continents</mat-label>
  <mat-select [(ngModel)]="selectedContinent">
   <mat-option *ngFor="let continent of formData" [value]="continent">{{ continent.Continent }}</mat-option>
  </mat-select>
 </mat-form-field>

 <mat-form-field>
  <mat-label>Countries</mat-label>
  <mat-select>
   <mat-option *ngFor="let country of selectedContinent.Countries" [value]="country">{{ country }}</mat-option>
  </mat-select>
 </mat-form-field>
</div>

根据另一个 mat-select 的值显示不同的 mat-options

Display different mat-options depending on what value another mat-select has

forms

typescript

ngfor

angular