Angular 5 input array from other component , cause length 0

Question

I put the collected data from services into the array. I put this array through @Input into the second component 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); 
  }
}

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

Vivek Doshi · Accepted Answer · 2018-02-13 12:29:35Z

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

edited Feb 13, 2018 at 12:29

answered Feb 13, 2018 at 12:13

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vivek Doshi Over a year ago

@Blackboy , checkout the suggestion in answer also , might help you , Happy Coding BTW :)

Rubén Soler · Accepted Answer · 2018-02-13 14:03:30Z

2

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

edited Feb 13, 2018 at 14:03

answered Feb 13, 2018 at 12:21

Rubén Soler

1,1879 silver badges24 bronze badges

3 Comments

Blackboy Over a year ago

Yours code is good i make a mistake when i copy my code on stackoverflow :)

Rubén Soler Over a year ago

@ADreNaLiNe-DJ because DataService is the Service declaration and dataService is the instance injected

ADreNaLiNe-DJ Over a year ago

@RubénSoler Thanks, I saw that. But the explanation is useful at least for the OP and for other users. So, you can put it in your answer by using edit link. ;o)

Sajeetharan · Accepted Answer · 2018-02-13 12:07:40Z

1

add a ngIf

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

answered Feb 13, 2018 at 12:07

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Angular 5 input array from other component , cause length 0

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related