In one of my component I'm subscribing to an observable. The underlying JSON object I'm subscribing to has many levels of nesting.
How can I make several dropdown select dependant on the previous selection? I'm using template variables to mark the selects.
this._exposureService.listAllExposures .subscribe( res => { this.allExposureData = res; } ) ;
res is of the following structure (for illustrating purposes)
res: [
{
companyId: 1,
reportDates: [
{
reportDate: 12/31/2017,
currencies: [
{
currency: 'USD'
}, ...
]
}, ...
]
}, ...
]
The idea is that in the ngFor directive I want to leverage the template variables of the selects. E.g. like below..., I doesnt work for me, I'm getting blank selects.. Is this possible?
Kind regards
<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>Here is one way to handle this: use a Subject!
Check out an example I created (the work is in the dropdown.ts file)