Question

我有一个父组件（ParentComponent），其html有几个子组件（ChildComponent）。显示的子组件数取决于使用ngFor的数组的长度。我试图弄清楚如何在模板中的每个子组件上设置属性。

这是我的ParentComponent html：

    <div>
        <p-panel header="Parent Component Manager">
            <p-panel header="ChildComponents">
                <childComponent *ngFor="let cComponent of cComponentsArray" [name]="childComponentTitle">
                </childComponent>
            </p-panel>
        </p-panel>
    </div>

我的ParentComponent.component.ts文件包含（我想停止使用它并使用来自cComponentsArray的字符串值：

childComponentTitle: string = "This text is passed to child."

My ChildComponent html：

<p-accordion [multiple]="true">
    <p-accordionTab header="ChildComponent name: {{name}}">
        <h4>Random text</h4>
        <h4>Random text</h4>
    </p-accordionTab>
</p-accordion>

My ChildComponent.component.ts文件包含：

@Input() name: string;

使用上面的当前代码，这将把子组件“name”属性的EACH设置为相同的东西。我想根据cComponentsArray的cComponent中包含的字符串值来设置它。

我尝试在ParentComponent.html中使用

[name] = {{cComponent.name}}

没有任何运气。有人可以向我解释我做错了什么以及如何正确实施这个？

Answer 1

[]和{{}}可以从不一起使用。

只需使用

[name]="cComponent.name"

使用ngFor将数据传递给嵌套组件

1 个答案: