任何想法这个角度主 - 细节实现可能会缺少什么？

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>

选择上面列表中的任务时，将触发Master.component.ts中的onSelect（任务）方法。 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

你只需要在app-detail选择器上添加* ngIf，这样当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演示