Любая идея, что может отсутствовать в этой угловой реализации мастер-детализации?

Question

Master.component.html отображает 2 задачи при загрузке браузера:

<div class="parent">
  <ol>
    <li
      *ngFor="let task of tasks"
      (click)="onSelect(task)"
      [class.selected]="task === selectedTask"
    >
      {{task.text}} - {{task.done}}
    </li>
  </ol>
  <app-detail [task]="selectedTask"></app-detail>
</div>

Когда выбрана задача в списке выше, запускается метод onSelect (task) в Master.component.ts. Метод onSelect (task) в настоящее время пуст. Я ожидаю, что выбранная задача будет отображаться в Detail.component.html, но в настоящее время только "детали загружаются!" отображается:

<div *ngIf="task" class="detail">
  <h3>you selected {{task.text}}</h3>
  <table>
      <tr>
        <td>Text:</td>
        <td>{{ task.text }}</td>
      </tr>
      <tr>
        <td>Status:</td>
        <td>{{ task.done }}</td>
      </tr>
    </table>
</div>

{{ task }}

detail loads!

Вот файл Detail.component.ts:

import { Component, OnInit, Input } from '@angular/core';
import { Task } from '../models/task';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {

  @Input() task : Task
  constructor() { }

  ngOnInit() {
  }

}

Я создал эту реализацию как урезанную версию этого примера, которую я нашел на YouTube: https://www.youtube.com/watch?v=3InW7kyPDCw

Есть идеи, почему выбранное задание в Master не отображается в деталях?

Answer 1

Вам просто нужно добавить * ngIf в селектор app-detail, чтобы он мог загружаться, когда selectedTask , имеющий значение,

вот пример

<div class="parent">
  <ol>
    <li
      *ngFor="let task of tasks"
      (click)="onSelect(task)"
      [class.selected]="task === selectedTask"
    >
      {{task.text}} - {{task.done}}
    </li>
  </ol>
  <app-detail *ngIf="selectedTask" [task]="selectedTask"></app-detail>
</div>

вот Stackblitz демо