angular2 *ngfor 和嵌套可观察

Question

嵌套 observable 出现问题：

我设法制定了正确数量的计划，顺便说一句，所有 wariable 都设置得很好，我可以在控制台中看到状态的数量在增加...
但是组合框是空的我做错了什么？

这是我模板中的代码片段：

<tr *ngFor="let plan of plans$ | async">
    <td><input type="text" [(ngModel)]="plan.libelle"/></td>
    <td>
        <select>
            <option *ngFor="let statut of statuts$ | async"
                    ngValue="{{statut.id}}"
                    [selected]="statut.id == plan.statut.id">
                {{statut.libelle}}
            </option>
        </select>
    </td>
</tr>

我组件中的另一个：

private plans$:Observable<Array<Plan>>;
private statuts$:Observable<Array<Param>>;

constructor(private planService:PlanService, private paramService:ParamService) {}

ngOnInit() {
    this.statuts$ = this.paramService.typesPlan$; //return the observable from the service
    this.plans$ = this.planService.plans$; //same thing
    this.paramService.loadAll('plan'); //this load all the status in an async way.
    this.planService.loadAll(); //the same as above and it work.
}

我得到的结果是 table 我的计划，但在同一行上，组合是空的：组合中没有选择（异步不起作用？）似乎在状态 $ 更新时模板没有更新

感谢您的帮助！

Answer 1

我想这就是你想要的：

        <option *ngFor="let statut of statuts$ | async"
                [(ngValue)]="statut.id">
            {{statut.libelle}}
        </option>

或

        <option *ngFor="let statut of statuts$ | async"
                [ngValue]="plan.statut.id"
                (ngValueChange)="status.id = $event">
            {{statut.libelle}}
        </option>

Answer 2

我通过修改模板和组件解决了我的问题:

<tr *ngFor="let plan of plans$ | async">
<td><input type="text" [(ngModel)]="plan.libelle"/></td>
<td>
    <select>
        <option *ngFor="let statut of statuts"
                ngValue="{{statut.id}}"
                [selected]="statut.id == plan.statut.id">
            {{statut.libelle}}
        </option>
    </select>
</td>

和组件：

private plans$:Observable<Array<Plan>>;
private statuts:Array<Param>;

constructor(private planService:PlanService, private paramService:ParamService) {}

ngOnInit() {
    this.paramService.typesPlan$.suscribe((status)=> this.status = status); 
    this.plans$ = this.planService.plans$; 
    this.paramService.loadAll('plan'); //this load all the status in an async way.
    this.planService.loadAll(); //the same as above and it work.
}

angular2 *ngfor 和嵌套可观察

angular2 *ngfor and nested observable

angular2-template

angular