Question

我目前有两种类型的组件，而ParentComponent包含一组ChildComponents。

这样的事情：

@Component({
    ...
})
export class ParentComponent {
    children: ChildComponent[] = [];

    // methods that use properties in children
}

然后ChildComponent看起来像这样：

@Component({
    ...
})
export class ChildComponent {
    @Input() title: string = "Default Title";

    changeTitle() {
        this.title = "New Title";
    }
}

我如何在*ngFor中为每个项目编写一个children的模板并显示相应的ChildComponent？我目前正在这样做的方法是在ChildComponent中输入title并在ParentComponent模板中执行类似的操作：

<child-component *ngFor="let child of children" [title]="child.title"><child-component>

这对于设置信息完全正常，但是当ChildComponent中的title发生更改时，不能在ParentComponent中获取更新信息。有关示例，请参阅this Plunker。如果单击“添加子项”按钮，它将向children添加一个新的ChildComponent并使用标题“Test”，正确覆盖“Default Title”。现在尝试单击任何ChildComponents的“更改标题”按钮，然后单击底部的“打印标题”。

正如您所看到的，原始的“测试”标题仍在阅读中，因为显示的ChildComponents实际上并不是children中存储的那些。有没有办法可以直接显示ChildComponents而不是创建新的？[/ p>

显示组件数组

0 个答案: