angular activRoute params TypeError: Невозможно прочитать свойство 'id' из неопределенного

Question

Я пытаюсь перейти от компонента Сведения о компании к компоненту Редактировать компанию с помощью company.id параметр.

Переход от компонента «Список компании» к компоненту «Сведения о компании» работает, но когда я пытаюсь сделать то же самое из «Детали компании» в «Редактирование компании»,

<button (click)="editCompany(company.id)">edit</button> это показывает ошибку:

Ошибка типа ОШИБКА: невозможно прочитать свойство 'id' из неопределенного

когда я жестко закодировал идентификатор на кнопке в компании Detail.html следующим образом: <button (click)="editCompany(4)">edit</button>

он успешно переходит к компании Edit, например, с компанией id =4, связывающей форму.

Может кто-нибудь объяснить, почему (click)="editCompany(company.id)" в companyDetail.html не работает так же, как нажатие кнопки в 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

Из угловой документации :

Текст между фигурными скобками часто является именем свойства компонента. Angular заменяет это имя строковым значением соответствующего свойство компонента.

В более общем смысле текст между фигурными скобками является выражением шаблона этот Angular сначала вычисляет, а затем преобразует в строку.

и в соответствии с этой строкой company$ | async as c вы - псевдоним компании со значением c, поэтому вы не можете получить доступ к стоимости компании напрямую, как это company.id вы можете получить доступ к стоимости компании с помощью «c», который вы назначаете как

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

Надеюсь, это поможет! Приветствия

Answer 2

Вы связывали результат со значением 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>