角度2 ngforの配列の配列を表示

Question

私は配列の既存のコンポーネントを表示したいが、それは動作しません、新しいコンポーネントが作成され、ngforで表示されていないと思われます配列は新しいコンポーネントが作成されるのが見えますが、デフォルト値ではなく、渡される現在の値ではありません。何が間違っていますか？

HTML：

<div #visualTextDiv class = "visual_text" [ngStyle]=setStyles()> 

    <div *ngFor="let lineCounter of visualDivArray"> 
    <app-visual-text-div></app-visual-text-div> 
    </div> 

</div> 

はtypescriptです：

if(this.visualDivArray.length < currentDivIndex+1){ 
    let newv = new VisualTextDivComponent() 
    this.visualDivArray.push(newv); 
    console.log("creating new " + this.visualDivArray.length); 
} 

this.visualDivArray[currentDivIndex].setData(textValue); 

Answer 1

あなたVisualTextDivComponentオブジェクトの配列を作成しました。その配列をngForに渡します。そして、このようなあなたのapp-visual-text-divコンポーネントに、配列の各アイテムを渡す：

<div #visualTextDiv class = "visual_text" [ngStyle]=setStyles()> 
    <div *ngFor="let lineCounter of visualDivArray"> 
    <app-visual-text-div [curLineCounter]="lineCounter"></app-visual-text-div> 
    </div> 
</div> 

curLineCounterまたはいくつかのより良い名前、app-visual-text-divコンポーネント内の変数です。

AppVisualTextDiv.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-visual-text-div', 
    templateUrl: './AppVisualTextDiv.html' 
}) 
export class AppVisualTextDiv{ 
    @Input() curLineCounter: { 
    'id': number, 
    'someValue': string, 
    }; 
} 

AppVisualTextDiv.html

<div id="{{curLineCounter.id}}"> 
    <span>{{curLineCounter.someValue}}</span> 
</div> 
<!-- or whatever your use case provides -->