ngForを使用してネストされたコンポーネントにデータを渡す

Question

htmlに複数の子コンポーネント（ChildComponent）がある親コンポーネント（ParentComponent）があります。表示される子コンポーネントの数は、ngForを使用する配列の長さによって異なります。私はどのようにテンプレートの子コンポーネントのそれぞれにプロパティを設定するかを理解しようとしています。ここで

は私のparentComponent htmlです：

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

マイChildComponent 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から使用文字列値、これを使用して停止するとが含まれています

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

私のChildComponent.component.tsファイルに含まれています：

@Input() name: string; 

上記の現在のコードでは、子コンポーネントの「名前」プロパティの1つが同じものに設定されます。私はcComponentsArrayのcComponent内に含まれている文字列の値に従って設定したいと思います。

私は運なしParentComponent.html

[name] = {{cComponent.name}} 

に使用してみました。誰かが私が間違ってやっていることと、これを適切に実装する方法を私に説明することができますか？

Answer 1

[]および{{}}缶を一緒に使用することができます。

ただ、 `cComponent.name`はあなたが渡したい値が含まれている場合

[name]="cComponent.name"