Angular5:使用模板变量的依赖下拉列表

Posted

技术标签:

【中文标题】Angular5:使用模板变量的依赖下拉列表【英文标题】:Angular5: Dependant dropdown using template variable 【发布时间】:2018-06-25 09:55:34 【问题描述】:

在我的一个组件中,我订阅了一个 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>

【问题讨论】:

也许尝试让 date of company.value.reportDates ?所以只是 .value 在 referenceName 的末尾? 【参考方案1】:

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

查看我创建的示例(工作在 dropdown.ts 文件中)

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

【讨论】:

以上是关于Angular5:使用模板变量的依赖下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

Jinja for 循环不会填充选择下拉列表

您如何在 Google 表格中进行动态/依赖下拉菜单?

pyqt5 从下拉列选后一一添加到lineedit?

使下拉列表依赖于 MVC Core 中的另一个下拉列表

如何在使用模板的 word 文档中创建下拉列表?

使用 php 变量创建动态 mysql 查询