オブジェクトデータを正しく表示して角2で表示する方法

Question

私は角度2を学習していますが、私は私の見解のうちでは奇妙に見えます。

import { CompanyService } from '../../services/company.service'; 
import { Company } from '../../models/company';  
export class TestEssayComponent implements OnInit { 
     company: Company; 
     constructor(private companyService: CompanyService){} 
    ngOnInit() { 
     this.getCompany(); 
     } 
    getCompany(){ 
     var company_id: number; 
     company_id = parseInt(localStorage.getItem('company_id')); 
     this.companyService.getById(company_id).subscribe(
      data => { 
      var company = new Company; 
      company = data.data; 
      this.company = company; 
      console.log(this.company); 
      } 
     ); 
    } 
} 

そして、私が持っているhtmlファイル内：

<section class="content-header"> 
    <h1>New Test <small>{{company.name}}</small></h1> 
</section> 

そして私はそれを交換する場合、これはエラー"name of undefined"を与えるが、：

私が持っている私の tsコード内部

<section class="content-header"> 
     <h1>New Test <small>{{company}}</small></h1> 
    </section> 

これは[object Object]と表示されます。コンソールには、データが入力されています。 ビューで正しく表示するにはどうすればいいですか？

Answer 1

データがまだ利用できない間、後の要素をレンダリングします。またのみに*ngIf

よう

<h1 `*ngIf="company">New Test <small>{{company.name}}</small></h1> 

を使用することができます

<h1>New Test <small>{{company?.name}}</small></h1> 

nullまたはundefined agains守るために安全なナビゲーション演算子?.を使用しますデータが利用可能になります。