Angular5: зависимый выпадающий список с использованием переменной шаблона

В одном из моих компонентов я подписываюсь на наблюдаемое. Базовый объект JSON, на который я подписываюсь, имеет много уровней вложенности.

Как я могу сделать несколько выпадающих выбора в зависимости от предыдущего выбора? Я использую переменные шаблона, чтобы отметить выбор.

this._exposureService.listAllExposures
  .subscribe(
    res => {
      this.allExposureData = 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>

Источник

1 ответ

Решение

Вот один из способов справиться с этим: использовать Subject!

Посмотрите пример, который я создал (работа находится в dropdown.ts файл)

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

Источник
Другие вопросы по тегам