错误类型错误：无法读取 Object.eval [as updateRenderer] 中未定义的属性“project_name” - Angular 8

Question

有人可以解释一下可能出了什么问题吗？ 即使在定义（希望如此）时，我也会收到此错误：

错误类型错误：无法读取 Object.eval [as updateRenderer] (ProjectDetailComponent.html:23) 处未定义的属性“project_name”，位于 Object.debugUpdateRenderer [as updateRenderer] (core.js:45294)

在 ProjectDetailComponent.html 中

<h5 class="card-title">Name: {{ projectDetail.project_name }}</h5>

在 ProjectDetailComponent.ts 中

projectDetail: Project;

将项目作为具有以下属性的接口：

export interface Project {
    project_id: string;
    project_name: string;
    description: string;
}

同时，当我将其登录到控制台时，它会显示如下所示的数据； 这个链接

Answer 1

您可以像这样初始化projectDetail ：

projectDetail: Project =  {
   project_id: null,
   project_name: "",
   description: ""
};

或者您可以使用安全导航操作员? 像这样在模板中，

{{ projectDetail?.project_name }}

工作演示

Answer 2

用 ngIf 检查包裹你的代码

<ng-container *ngIf="projectDetail">
<h5 class="card-title">Name: {{ projectDetail.project_name }}</h5>
...
// rest of the code
</ng-container>

Answer 3

或者，您可以将Project定义为一个类而不是这样的接口：

export class Project {
  project_id: string;
  project_name: string;
  description: string;
}

由于它是一个class ，您可以使用new初始化projectDetail属性，如下所示：

@Component({....})
export class ProjectDetailComponent implements OnInit {
  ...
  projectDetail: Project = new Project();
  ...
}

现在您可以在没有安全导航操作符或一些虚拟数据的情况下在您的模板中使用。 而且，它不会给出这个错误

<h5 class="card-title">Name: {{ projectDetail.project_name }}</h5>

我希望它会帮助其他人:)