Я пишу приложение в typescript / angular, и у меня есть служба, которая получает json с данными, и я хотел бы отображать эти загруженные объекты, но может случиться так, что объектов может быть больше, чем я могу отобразить в одном компоненте html, поэтому я должен разбить этот массив объектов. Кстати, перед этим я должен фильтровать все объекты из json по ip-адресу, поэтому я пишу такой компонент:

export class ServerBoxComponent implements OnInit {

  pods = new Array<Pod>();

  @Input() node_s: NodeServer;

  getPods() {
    // console.log('Download pods');
    this.httpService.getPods().subscribe(data => {
      this.pods = data.items;
    });
    console.log('Download status: ' + this.pods.length);
  }

  filtering() {
    console.log('Node_s length: ' + this.node_s.status.addresses[1].address);
    console.log('Node_s length: ' + this.pods.length);
    for (let i = 0; i < this.pods.length; i++) {
      if (this.node_s.status.addresses[0].address === this.pods[i].status.hostIP) {
        console.log(this.pods[i].metadata.name);
        // this.node_s.podArray.push(this.pods[i]);
      }
    }
  }

  ngOnInit() {
    this.getPods();
    // this.filtering();
  }

  constructor(private httpService: HttpService) { }

}

Но я не могу использовать функцию фильтрации, потому что массив стручков пуст, но почему ??

2
akaoD 27 Фев 2018 в 12:10

1 ответ

Лучший ответ

Из-за поведения async ваш код должен выглядеть так:

this.httpService.getPods().subscribe(data => {
    this.pods = data.items;
    console.log('Download status: ' + this.pods.length); // call it here
    this.filtering(); // function should be called from here
});

Для получения более подробной информации, пожалуйста, следуйте // Execution Flow : #number таким образом весь поток выполнения будет выполнен

getPods() {
    // Execution Flow : 2
    this.httpService.getPods().subscribe(data => { 
        this.pods = data.items; // Execution Flow : 6
    });
    console.log('Download status: ' + this.pods.length); // Execution Flow : 3
}

// Execution Flow : 5
filtering() {
    console.log('Node_s length: ' + this.node_s.status.addresses[1].address);
    console.log('Node_s length: ' + this.pods.length);
    for (let i = 0; i < this.pods.length; i++) {
        if (this.node_s.status.addresses[0].address === this.pods[i].status.hostIP) {
            console.log(this.pods[i].metadata.name);
            // this.node_s.podArray.push(this.pods[i]);
        }
    }
}

ngOnInit() {
    this.getPods(); // Execution Flow : 1
    this.filtering(); // Execution Flow : 4
}
2
Vivek Doshi 27 Фев 2018 в 12:13