如何正確顯示對象數據以在Angular 2中查看

Question

我正在學習Angular 2，並且在我的一個觀點中我發現它很奇怪。

我ts代碼中，我有：

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"但是當我將其替換爲：

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

這將顯示[object Object]。在控制檯中，數據被填充。 那麼如何在視圖中正確顯示它？

Answer 1

使用安全導航操作?.看守agains null或undefined當數據尚未公佈

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

您還可以使用*ngIf像

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

只渲染元素之後數據變得可用。