angular2 *ngfor 和嵌套可观察

标签 angular angular2-template

遇到嵌套可观察对象的问题:

我设法制定了正确数量的计划, 顺便说一句,所有的 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.
}

我得到的结果是一张包含我的计划的表格,但在同一行上组合是空的:组合中没有选择(异步不工作?) 似乎在状态 $ 更新时模板没有更新

谢谢你的帮助!

最佳答案

我想这就是你想要的:

        <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>

关于angular2 *ngfor 和嵌套可观察,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38593776/

相关文章:

angular - 将 routerLink 与来自 angular2 中的 Promise 的参数一起使用

angular - *ngFor 中的双向数据绑定(bind)

angular - 在当前版本的 Angular2 中,我们可以在另一个组件中使用一个组件吗?

来自服务的 Angular 7 模态对话框/弹出窗口

javascript - 使用收到的数据更新模板

Angular 4 如何为整个应用程序设置 HttpClient 的默认选项?

css - 我如何将 p-growl 元素放置在屏幕的右下角?

angular - Meteor 不渲染 html 模板,只渲染路径

html - Angular 6,7 如何将默认主题颜色应用于 mat-sidenav 背景?

Angular ActivatedRoute 数据返回一个空对象