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