html - 选择依赖于另一个选择 - Material Angular

Question

我想创建两个垫选择。其中之一(与 reference 相关)依赖于 type 的选择。

types 是一个包含在 Typescript 中实现的枚举的数组。

我尝试如下，但是在选择了更改类型后正确的引用之后，带有 reference 的选择是空的...

<mat-form-field>
  <mat-label>Type</mat-label>
  <mat-select placeholder="Type" formControlName="type" name="type">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let t of types" [value]="t">
      {{t}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field>
  <mat-label>Reference</mat-label>
  <mat-select placeholder="Reference" formControlName="reference" name="reference">
    <div [ngSwitch]="type.value">
      <div *ngSwitchCase="types[0]">
        <mat-option *ngFor="let r of deliveries" [value]="r.id">
          {{r.id}}
        </mat-option>
      </div>
      <div *ngSwitchCase="types[1]">
        <mat-option *ngFor="let r of orders" [value]="r.id">
          {{r.id}}
        </mat-option>
      </div>
      <div *ngSwitchDefault>
        <mat-option>None</mat-option>
      </div>
    </div>
  </mat-select>
</mat-form-field>

有人可以帮忙吗？也许有更好的方法？

顺便说一下...创建新对象时不使用“select with reference”是正确的，所以这个 select 的逻辑可能是有问题的...

Answer 1

有几种方法可以实现这一点。你可以，例如创建两个数组数组

deliveries=[[1,2,3],[4,5],[6,7,8]]
orders=[["A","B","C"],["D","E"],["F","G","H"]]

并制作

<mat-option *ngFor let r of deliveries[myForm.get('type').value]>...</mat-option>
 //and
<mat-option *ngFor let r of orders[myForm.get('type').value]>...</mat-option>