角度激活路由参数类型错误：无法读取未定义的属性“id”

Question

我尝试从公司详细信息组件导航到公司编辑组件 company.id参数。

从公司列表组件导航到公司详细信息组件有效，但是当我尝试从公司详细信息到公司编辑时，

<button (click)="editCompany(company.id)">edit</button> 它显示一个错误：

ERROR 类型错误：无法读取未定义的属性“id”

当我像这样对公司 Detail.html 中的按钮上的 id 进行硬编码时： <button (click)="editCompany(4)">edit</button>

它成功导航到公司编辑，例如公司id =4绑定表单。

有人能解释一下为什么 companyDetail.html 中的 (click)="editCompany(company.id)" 与 companyList.html 中的按钮单击不同吗？

代码截图：

companyDetail(id: number): void {
    this.router.navigate(['company-detail', id]);
}

公司详情.html

   <div *ngIf="company$ | async as c; else loading">
       Id: {{c.id}}, Name: {{c.companyName}}
   </div>
   <button (click)="editCompany(company.id)">edit</button>

公司详情.ts

editCompany(id: number): void {
    this.router.navigate(['company-edit', id]);
};

Answer 1

您将结果绑定到c 的值，所以c.id 应该可以工作，如果我假设您的ngif 条件为真。此外，您在按钮之前结束了 div 标签，(click)=editCompany(4) 工作是因为您没有在那里绑定任何东西。

 <div *ngIf="company$ | async as c; else loading">
  Id: {{c.id}}, Name: {{c.companyName}}
 <button (click)="editCompany(c.id)">edit</button>`
 </div>

Answer 2

来自 Angular documentation：

大括号之间的文本通常是组件属性的名称。 Angular 将该名称替换为对应的字符串值 组件属性。

更一般地说，大括号之间的文本是一个模板表达式 Angular 首先计算然后转换为字符串。

并且根据这一行company$ | async as c，您将公司价值别名为 c， 所以你不能像这样直接访问公司价值company.id你可以使用你分配的'c'访问公司价值

<button (click)="editCompany(c.id)">edit</button>

希望这会有所帮助！ 干杯