更新 mat-select 动态反应形式中的选项

Question

我想知道如何使用 Angular 7 中的动态表单更新动态创建的 mat-select 中的选项。它具有以下结构：

<span *ngIf="item !== undefined">
  <div [formGroup]="form">
    <div [ngSwitch]="item.controlType" class="col s12 m12 l4">
      <mat-form-field *ngSwitchCase="'textbox'" class="example-full-width">
        <input matInput [placeholder]="item.label" [formControlName]="item.key" [id]="item.key" [type]="item.type">
      </mat-form-field>
      <mat-form-field *ngSwitchCase="'dropdown'">
        <mat-select [formControlName]="item.key" [placeholder]="item.label" *ngIf="item.callback==1"
          (selectionChange)="cargaDropDown(item.origenCallBack, item.key);">
          <mat-option *ngFor="let opt of item.options" [value]="opt.key">
            {{opt.value}}
          </mat-option>
        </mat-select>
        <mat-select [formControlName]="item.key" [placeholder]="item.label" *ngIf="item.callback==0">
          <mat-option *ngFor="let opt of item.options" [value]="opt.key">
            {{opt.value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div class="errorMessage" *ngIf="!isValid">{{item.label}} is required</div>
  </div>
</span>

我有一种 mat-select，它有回调，应该根据用户的选择填充其他 mat-select，我只知道要更新选项的 mat-select 的表单控件名称，我需要知道如何实现这一点，我在执行 cargaDropDown 方法时已经收到数据，谢谢您的帮助。

更新：

我按照角度页面中的教程进行操作：

https://angular.io/guide/dynamic-form

我动态创建了表单，我有两种选择一种是父母，另一种是孩子，我试图实现你的答案，只是为了将新数据的值分配给项目：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], selectedCargaId: number): any {
        if (!items || !selectedCargaId) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.options.cargaId === selectedCargaId);
    }
}

但 selectedCargaId 的值始终为 null，从不更新。

我需要将在父亲中选择选项时从服务器检索的数据分配给孩子，我希望它与 mat-select 一起使用。

再次感谢您的帮助。

Answer 1

我假设您有一个 array of objects，您需要根据第一个选择来筛选并显示在第二个 mat-select 选项中。

为此，您可以使用已回答 here 的管道过滤选项。

所以，你的模板中有这样的东西

<mat-option *ngFor="let opt of item.options | myfilter:cargaId" [value]="opt.key">

cargaId 是第一个 mat-select 的选定 ID。

在你的管道中，像这样过滤 item.options

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], selectedCargaId: number): any {
        if (!items || !selectedCargaId) {
            return items;
        }
        // filter items array, items which match and return true will be
        // kept, false will be filtered out
        return items.filter(item => item.options.cargaId === selectedCargaId);
    }
}

希望这会有所帮助！干杯！