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顯示數組中的元素

回答

相關問題