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 中显示吗?
最佳答案
你只需要在 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演示
关于javascript - 知道这个 Angular 主从实现可能缺少什么吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52156661/