javascript - 来自其他组件的 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

您正在获取 console.log(dataInput.length); 因为它在分配数据之前被调用

有两种方法可以解决这个问题:

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

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

2) 实现 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);
});