Angular5:使用模板变量

时间:2018-01-16 16:13:15

标签: angular angular5 ngfor template-variables

在我的一个组件中,我订阅了一个observable。我订阅的基础JSON对象具有多层嵌套。

如何根据之前的选择进行多次下拉选择?我使用模板变量来标记选择。

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

res 具有以下结构(用于说明目的)

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

我的想法是在 ngFor指令中我想利用选择的模板变量。例如。就像下面......,我不适合我,我有空白选择..这可能吗?

亲切的问候



<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

以下是处理此问题的一种方法:使用Subject

查看我创建的示例(作品位于dropdown.ts文件中)

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