応答が角2のコードでレンダリングされない

Question

私はポストリクエストの結果をレンダリングしようとしています。バックエンドは正常に動作しています。ただし、次のように結果を表示することはできません。

@Component({ 
    moduleId: module.id, 
    providers: [InvoiceService], 
    template: ` 
     <div ng-if="invoice"> 
     <span>{{ invoice?.invoiceType | async }}</span> 
     </div> 
    ` 
}) 

上記のコードに誤りがある可能性があります。リクエストレスポンスは非同期的に取得されますが、結果が利用可能になる前に "テンプレート"がレンダリングされているように見えます.HTML要素は空です。

コードの残りの部分を慎重にチェックし、うまく動作しているようだが、理解するために重要かもしれませんした

export class InvoiceDetail implements OnInit { 
    private invoice: Invoice; 
    private errorMessage: string; 

    constructor(private invoiceService: InvoiceService, private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
     console.log('On init invoice'); 
     this.getInvoice(); 
    } 

    getInvoice() { 
     const id: number = this.route.snapshot.params["id"]; 
     this.invoiceService.getInvoice(id).subscribe(
      (invoiceResp: Invoice) => this.invoice = invoiceResp); 

     console.log("Id: " + id); 
    } 

} 

送り状クラス：

export class Invoice { 
    constructor(
     public invoiceNumber: string, 
     public creationDate: string, 
     public invoiceType: string 
    ) { } 
} 

サービスメソッド：

getInvoice(id:number): Observable<Invoice> { 
    return this.http.get(this.invoiceUrl+id) 
     .map(this.extractData) 
     .catch(this.handleError); 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    console.log(body); 
    return body || {}; 
} 

private handleError(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 

ご意見やご提案は高く評価されます。

EDIT：

<ng-component> 
     <!--template bindings={ 
    "ng-reflect-ng-if": "[object Object]" 
}--><div> 
     <span></span> 
    </div> 
</ng-component> 

Answer 1

あなたのテンプレートは*ngIfないng-if、

<div *ngIf="invoice"> 
     <span>{{ invoice?.invoiceType | async }}</span> 
</div>