Question

这又与ExpressionChangedAfterItHasBeenCheckedError有关。

在我的情况下，我有一个参数'data'，我从ajax调用中恢复。此数据用于通过@input指令创建子级。我希望绑定仅在定义数据时发生。但我不知道如何用角度

做到这一点

export class UserComponent{
    data: any


    constructor(
        private userService: UserService){
            this.userService.getUser()
            .subscribe(result => {
                this.data = result;
            }
       }
    );
}

因为它的工作方式，angular会显示一个ExpressionChangedAfterItHasBeenCheckedError，我理解为什么，但是如何要求angular等待回调完成和数据！=来自未定义的开始绑定和东西，目标是使用来自数据库的实际值初始化一些子项。

如果我在绑定“真实”数据之前应该等待循环结束，那很好，但如何在没有此错误的情况下执行此操作（并且请不要使用setTimeout，因为它看起来很垃圾！）。

由于

<!--the template if it matter --><somechildtag [data]="data" ></somechildtag>

Answer 1

使用ng-container加载您的组件。

例如：

    <div *ngIf="data?.length > 0">
        <ng-container *ngComponentOutlet="myChildComponent;
              ngModuleFactory: childComponentsModule;"></ng-container>
    </div>

因此，只有当data对象填充时，您才会渲染您的孩子。

在您的组件中：

private childComponentsModule: NgModuleFactory<any>;

constructor(private compiler: Compiler){
  this.childComponentsModule = compiler.compileModuleSync(ChildComponentsModule);
}

您可以在此处查看有关如何动态加载组件的更详细示例：

Angular2: Use Pipe to render templates dynamically

Angular的文档：

https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html

在绑定模板angular

1 个答案: