angular 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>

打字稿：

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 -->