angular 2 ngfor显示数组中的元素

我有一个组件数组，我想显示该数组中的现有组件，但它不起作用，我怀疑一个新的组件创建并显示在ngfor中，而不是在该数组，因为我看到新组件创建，但有一个默认值，而不是传递给它们的当前值，我做错了什么？angular 2 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);

来源

2016-12-25 gggggguy

你的意思与 “数组中的现有组件” 是什么。 Angular不会渲染数组中的组件。 –

@GünterZöchbauer所以我不能有一个数组，并用组件实例填充它，并使其呈现ngfor？ – gggggguy

不要这样想。 '新的VisualTextDivComponent（）'不会给你一个组件，只有组件类的一个实例。也许这种方法提供了一些想法http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 –

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

来源

2016-12-25 23:37:22 ppovoski

angular 2 ngfor显示数组中的元素

回答

相关问题