forループからデータを送信する方法

Question

forループを使用していて、@ Inputイベントエミッタを使用して他のコンポーネントにデータを送信したいとします。 しかし、問題は、コンポーネントテンプレートの最後の値しか受け取っていないことです。

助けを必要とします。

親コンポーネントTS

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core'; 

@Component(
    { 
    selector  : 'parent-component', 
    templateUrl : './parent.component.html', 
    } 
) 
export class ParentComponent implements OnInit { 
    public data; 

    constructor() { 
    } 

    getData(){ 
    for (let i = 1; i <= i; i++) {   
     this.data = i; 
    } 
    } 
} 

親コンポーネントテンプレート

<child-component [data]="data"></child-component> 

チャイルドコンポーネントTS

import { Component, OnInit, ViewChild, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; 
@Component({ 
    selector: 'child-component', 
    templateUrl: './child-component.html' 
}) 

export class ChildComponent implements OnInit, OnChanges { 
@Input() 
    data; 

    constructor() { } 
    ngOnChanges(changes: SimpleChanges) { 
    // i am receiving a value 1,2, 3...10 
    } 
} 

チャイルドコンポーネントテンプレート

  <div>{{data}}</div> 

私は、子コンポーネントに反映されていない子コンポーネントに表示する必要がある子コンポーネントのデータを取得するために、親コンポーネントのループを使用しています。 お勧めします。

Answer 1

入力バインドは、バインドされているデータの現在のの値ののみを参照してください。ループを遅くすることができた場合、バインドされた値は1、2、3などになりますが、一度に1つの値しか表示されません。

ループからすべての値を取得する場合は、配列などを使用する必要があります。例：

export class ParentComponent implements OnInit { 
    public data = []; 

    constructor() { 
    } 

    getData(){ 
    // I assume this was supposed to be 10, not i, or else you get an infinite loop 
    for (let i = 1; i <= 10; i++) {   
     this.data.push(i); 
    } 
    } 
}