如何正确显示对象数据以在 Angular 2 中查看答案

【问题标题】：How to display Object data correctly to view in Angular 2如何正确显示对象数据以在 Angular 2 中查看
【发布时间】：2026-01-27 01:35:01
【问题描述】：

我正在学习 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]。在控制台中，数据被填充。那么如何在视图中正确显示呢？

【问题讨论】：

标签： json angular angular2-template typescript-typings

【解决方案1】：

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

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

你也可以用*ngIf点赞

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

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

【讨论】：