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等，但一次只能有一个值。

如果您希望它从循环中获取所有值，您将需要使用数组或类似的东西。例如：

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);
    }
  }
}

如何从for循环发送数据

1 个答案: