Question

我尝试使用以下命令从公司详细信息组件导航到公司编辑组件 company.id参数。

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

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

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

当我将公司ID硬编码在公司Detail.html中的按钮上时，如下所示： <button (click)="editCompany(4)">edit</button>

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

有人可以解释为什么CompanyDetail.html中的(click)="editCompany(company.id)"与CompanyList.html中的按钮单击不同吗？

代码片段：

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

companyDetail.html

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

companyDetail.ts

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

Answer 1

您将结果绑定到“ c”的值，因此“ c.id”应该起作用，并且如果我假设您的“ ngif”条件为true，那么您还要在button和（click）= editCompany之前结束div标签。（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

从角度documentation：

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

通常，括号之间的文本是模板表达式   Angular首先求值，然后转换为字符串。

，按照此行company$ | async as c，您是别名为c的公司值，因此您不能像这样company.id那样直接访问公司价值，您可以使用分配为'c'的公司价值

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

希望这会有所帮助！干杯

Angular ActivateRoute参数TypeError：无法读取未定义的属性'id'

2 个答案: