Angular 5 来自其他组件的输入数组，导致长度为 0

Question

我把从服务中收集的数据放到数组中。我通过 @Input 将这个数组放入第二个组件，但在其中数组而不是长度 18 有 0;

TS：

  arr: Datas[] = [];


  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    console.log("ng init");
    this.getArraysFromData();

  }

  getArraysFromData() {
    this.DataService.getDatas().subscribe((data: Datas[]) => {
      for (let item of data) {
        this.arr.push(item);
      }
      console.log("smartlamps from Map ", this.arr);
    });
  }

}

HTML :

<app-osm-generator [dataInput]="arr"></app-osm-generator>

我输入的组件

@Input() dataInput: Datas[];


ngOnInit(): void {
  this.takeDataFromInput();
}

takeDataFromInput() {
console.log(this.dataInput.length);   <-- is 0 must be 18
  for(let item of dataInput) { 
    console.log(item); 
  }
}

Answer 1

添加一个ngIf

<app-osm-generator *ngIf="arr" [dataInput]="arr"></app-osm-generator>

Answer 2

你得到 console.log(dataInput.length); 因为它在分配数据之前被调用

有两种方法可以解决问题：

1) 仅当数据可用时才包含 app-osm-generator

<app-osm-generator *ngIf="arr.length > 0" [dataInput]="arr"></app-osm-generator>

2) implements OnChanges

ngOnChanges(changes: SimpleChanges) {
    let data = changes.dataInput;
    console.log('prev value: ', data.previousValue);
    console.log('got name: ', data.currentValue);
    console.log(data.length);
}

检查控制台将消除您对流程的所有疑虑

有关第二种方法的更多详细信息：READ

建议:

this.DataService.getDatas().subscribe((data: Datas[]) => {
    this.arr = [ ...this.arr , ...data]; // instead of looping try out ES6's feature 
    console.log("smartlamps from Map ", this.arr);
});

Answer 3

我不知道这个问题是否有误，但不是 this.DataService 因为 DataService 是服务声明而 dataService 是注入的实例..

this.DataService.getDatas().subscribe((data: Datas[]) => {
      for (let item of data) {
        this.arr.push(item);
      }
      console.log("smartlamps from Map ", this.item);

好：

this.dataService.getDatas().subscribe((data: Datas[]) => { // good!
      for (let item of data) {
        this.arr.push(item);
      }
      console.log("smartlamps from Map ", this.item);

Angular 5 来自其他组件的输入数组，导致长度为 0

Angular 5 input array from other component , cause length 0

html

javascript

typescript

angular

angular5