Verwendung einer asynchronen Pipe mit ngFor

Ultimate Ziel ist es, verschachtelte ngFor dynamisch erstellt zu verwenden. Ich versuche, eine Reihe von Dropdown-Menüs zu erstellen, die jeweils von dem vorherigen abhängen. Die genaue Anzahl der Dropdown-Menüs ist unbekannt und wird dynamisch erstellt. Beispiel

<form [ngFormModel]="dropDownForm" (ngSubmit)="onSubmit()">
    <div *ngFor="#nr of numberOfDropdowns">
      <label>{{nr.name}}</label>
      <select [ngFormControl]="dropDownForm.controls[i]">
          <option  *ngFor="#item of Dropdown[nr.id] | async" value="{{item.value}}">{{item.name}}</option>
      </select>
    </div>
  <button type="submit">Submit</button>
</form>

Das Ganze schlägt bei Dropdown [nr.id] fehl, was bei einer asynchronen Pipe nicht zu funktionieren scheint. Ich habe ein bisschen rumgespielt:

{{myAsyncObject | async}} //works
{{myAsyncObject['prop1'] | async}} //fails silently
{{myAsyncObject['prop1']['prop2'] | async}} // EXCEPTION: TypeError: Cannot read property 'prop2' of undefined in [null]    

Haben Sie Ideen, wie dies funktioniert?

Antworten auf die Frage(4)

Ihre Antwort auf die Frage