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