Angular ActivateRoute參數TypeError：無法讀取未定義的屬性“ id”

Question

我嘗試使用company.id參數從公司詳細信息組件導航到公司編輯組件。

從公司列表組件導航到公司詳細信息組件有效，但是當我嘗試從公司詳細信息到公司編輯進行相同操作時，

<button (click)="editCompany(company.id)">edit</button>它顯示一個錯誤：

錯誤類型錯誤：無法讀取未定義的屬性“ id”

當我像這樣在公司Detail.html中的按鈕上硬編碼ID時： <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的值，因此，如果我假設您的ngif條件為true，則c.id應該有效。 另外，您在按鈕之前結束了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 文檔中 ：

大括號之間的文本通常是組件屬性的名稱。 Angular用相應組件屬性的字符串值替換該名稱。

通常，括號之間的文本是Angular首先求值然后轉換為字符串的模板表達式。

並按照此行company$ | async as c company$ | async as c您是company$ | async as c公司名稱的別名，因此您不能像該company.id一樣直接訪問公司的值company.id您可以使用分配為'c'的公司值

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

希望這會有所幫助！ 干杯