Angular5：使用模板变量的相关下拉列表

Question

在我的一个组件中，我订阅了一个可观察对象。我订阅的底层 JSON 对象有很多层级的嵌套。

如何使多个下拉菜单 select 依赖于之前的 selection？我正在使用模板变量来标记 selects.

this._exposureService.listAllExposures
  .subscribe(
    res => {
      this.allExposureData = res;
    }
  )
;

res 具有以下结构（用于说明目的）

res: [
{
    companyId: 1,
    reportDates: [
        {
            reportDate: 12/31/2017,
            currencies: [
                {
                    currency: 'USD'
                }, ...
            ]
        }, ...
    ]
}, ...

]

想法是在 ngFor 指令 中我想利用 select 的模板变量。例如。如下所示...，我不适合我，我变得一片空白 selects.. 这可能吗？

亲切的问候

<mat-form-field>
  <mat-select #company>
    <mat-option *ngFor="let exp of allExposureData" [value]="exp">{{exp.companyId}}</mat-option>
  </mat-select>
</mat-form-field>


<mat-form-field>
  <mat-select #reportDate>
    <mat-option *ngFor="let date of company.reportDates" [value]="date">{{dates.reportDate}}</mat-option>
  </mat-select>
</mat-form-field>


<mat-form-field>
  <mat-select #currency>
    <mat-option *ngFor="let ccy of reportDate.currencies" [value]="ccy">{{ccy.currency}}</mat-option>
  </mat-select>
</mat-form-field>

Answer 1

这是一种处理方法：使用 Subject!

查看我创建的示例（作品在 dropdown.ts 文件中）

https://plnkr.co/edit/Ouz1OzKl2v7Kpk6Mxoep?p=preview

Angular5：使用模板变量的相关下拉列表

Angular5: Dependant dropdown using template variable

template-variables

ngfor

angular

angular5