json - 如何正确显示对象数据以在 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]。并且在控制台中，数据被填充。 那么如何在 View 中正确显示呢？

Answer 1

在数据尚不可用时，使用安全导航运算符?.来防范null或undefined

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

您还可以使用*ngIf，例如

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

仅在数据可用后渲染元素。