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

在数据尚不可用时，使用安全导航操作员?.再次保护null或undefined

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

您也可以使用*ngIf之类的

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

仅在数据可用后呈现元素。

如何正确显示对象数据以在Angular 2

1 个答案: