Показать сообщение определено в другом компоненте

Question

Так у меня есть эта часть шаблона в данный момент:

<template ngFor let-item [ngForOf]="arrayWithItems"> 
    <tr class="item" (click)="child.toggleActive()" #child [item]="item" item-component> 
    <tr class="detail" *ngIf="item.details && !item.errmsg" [details]="item.details" detail-component> 
    <tr class="detail" *ngIf="item.errmsg"> 
     <td colspan="3"> 
      <p>{{ item.errmsg }}</p> 
     </td> 
    </tr> 
</template> 

Когда пользователь нажимает на item-component, то item-component извлекает детали пункта (используя услугу) и устанавливает его до item.details. Поскольку item.details затем задан, он показывает detail-component (*ngIf). Однако я хочу, чтобы всякий раз, когда что-то пошло не так (например, недействительный json вернулся), он показывает сообщение. Проблема, с которой я столкнулся: сообщение определено в item-component.

Как я могу сделать эту работу так, как я хочу? Обратите внимание, что модель Item. Итак, item.errmsg, так как у меня он сейчас не работает. Мне нужен альтернативный метод, кроме добавления в модель ключа errmsg.

Answer 1

Вы уже назначили компонент переменной #child. Вы можете использовать это в своем шаблоне для доступа к item-component.

<template ngFor let-item [ngForOf]="arrayWithItems"> 
    <tr class="item" (click)="child.toggleActive()" #child [item]="item" item-component> 
    <tr class="detail" *ngIf="item.details && !item.errmsg" [details]="item.details" detail-component> 
    <tr class="detail" *ngIf="child.errmsg"> 
     <td colspan="3"> 
      <p>{{ child.errmsg }}</p> 
     </td> 
    </tr> 
</template>