非同期パネルバインディングエラー

Question

私はangular2に非同期パネルを作成しています。これは基本的に既存のコンポーネントをラップし、実際の観測可能なものが完了したときにのみ表示されます。あなたが見ることができるように

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

は、そのは非常にシンプルでNG-コンテンツのみ..です

はので、私の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> 

を見て、実際の使用量は次のようなものですそれが必要なときに表示されますが、ngの場合でも、観察可能なものが終了する前にまだ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'; 
      } 
     ); 

の（完全な）イベントに設定されているが、この周りにどのような方法や、より良い解決策はありますか？問題は、あなたが入力（NG-コンテンツ）として提供内容は、呼び出し内評価であるということである

{{model?.user?.id}} 

：アンギュラもそのレンダリング

Answer 1

前にトランスクルードコンテンツを解析しているようだ私はエルビス演算子を使用しますすなわち、async-panelコンポーネントを使用するコンポーネントです。したがって、userフィールドを使用しようとするときにmodelが定義されていることを確認する必要があります。