góc 2 thành phần hiển thị trong mảng

Question

tôi có một mảng thành phần, tôi muốn hiển thị các thành phần hiện có trong mảng đó nhưng nó không hoạt động, tôi nghi ngờ rằng một thành phần mới được tạo và hiển thị trong ngfor chứ không phải là một trong mảng bởi vì tôi thấy các thành phần mới được tạo ra nhưng với một giá trị mặc định và không phải là giá trị hiện tại được truyền cho chúng, tôi đang làm gì sai?

html:

<div #visualTextDiv class = "visual_text" [ngStyle]=setStyles()> 

    <div *ngFor="let lineCounter of visualDivArray"> 
    <app-visual-text-div></app-visual-text-div> 
    </div> 

</div> 

nguyên cảo:

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

Có bạn VisualTextDivComponent tạo một mảng các đối tượng. Chuyển mảng đó đến ngFor. Sau đó vượt qua từng hạng mục của mảng thành phần app-visual-text-div của bạn như thế này:

<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 hoặc một số tên tốt hơn, là một biến trong thành phần 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 -->