Question

我在angular2中创建一个异步面板，它基本上会包装现有的组件，只有在实际的observable完成时才会显示它。

所以我的HTML看起来像这样..

<div class="async-container">
    <div *ngIf="state === 'loading'" class="loading">Loading</div>
    <div *ngIf="state === 'error'" class="loading">Request failed</div>
    <ng-content *ngIf="state === 'complete'"></ng-content>
</div>

并且实际用法类似于..

<async-panel [service]="example.getObject(model.id)" (complete)="onLoad($event)">
    <div class="pul-right">
        {{model.user.id}}
    </div>
</async-panel>

正如你所看到的，它非常简单，ng-content仅在它应该是可见的时候可见但是即使使用ngIf我仍然在observable完成之前得到TypeError: Cannot read property 'user' of undefined。

用户值在面板的事件上设置

 this.service.subscribe(
            (data) => {
                this.complete.emit(data);
                this.state = 'complete';
            },
            (error) => {
                this.error.emit(error);
                this.state = 'error';
            }
        );

有没有办法绕过这个或更好的解决方案？ Angular似乎正在解析被翻译的内容甚至在其呈现之前

Answer 1

我会使用Elvis运算符：

{{model?.user?.id}}

问题是您提供的输入内容（ng-content）是在调用组件中评估的，即使用async-panel组件的组件。因此，您需要确保在尝试使用其model字段时定义user。

异步面板绑定错误

1 个答案: