I put the collected data from services into the array. I put this array through @Input into the second ponent but in it the array instead of length 18 has 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>

COMPONENT WHERE I INPUT

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

I put the collected data from services into the array. I put this array through @Input into the second ponent but in it the array instead of length 18 has 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>

COMPONENT WHERE I INPUT

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

• javascript
• html
• angular
• typescript
• angular5

• Do you mean console.log(this.dataInput.length) and for(let item of this.dataInput)? – SplitterAlex Commented Feb 13, 2018 at 12:11

3 Answers 3

You are getting console.log(dataInput.length); coz its is being called before data is assigned

There are 2 ways you can solve the issue :

1) Include app-osm-generator only when data is available

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

Checking console will clear all your doubts regarding the flow

For more details on 2nd method : READ

Suggestion :

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

I don't know if is a mistake in the question but not this.DataService because DataService is the Service declaration and dataService is the instance injected..

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

Good:

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

add a ngIf

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