javascript - 知道这个 Angular 主从实现可能缺少什么吗？

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(task) 方法被触发。 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 中选择的任务没有在 Detail 中显示吗？

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演示