Typescript - ссылка на нулевой массив

Я пишу приложение в 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) { }

}

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


typescript angular service ngoninit
person akaoD    schedule 27.02.2018    source источник
comment
Когда вы вызываете this.getPods();, массив pods в конечном итоге будет заполнен. Если вы вызовете свой filtering() до того, как getPods() заполнит массив, он будет пустым   -  person rollstuhlfahrer    schedule 27.02.2018
comment
Он выполняется асинхронно. This.filtering() выполняется до завершения this.getPods(). Асинхронная операция в действии! Используйте обещания для последовательного выполнения этих функций.   -  person Karthik Samyak    schedule 27.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Из-за поведения 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
}
person Vivek Doshi    schedule 27.02.2018
comment
Хорошо, это работает, но теперь у меня другая проблема: когда я пытаюсь поместить этот фильтрующий объект в массив, у меня возникает такая ошибка: ERROR TypeError: Unable to get свойство 'push' неопределенной или нулевой ссылки - person akaoD; 27.02.2018
comment
Эта ошибка означает, что вы ничего не вставляете в массив. Вы пытаетесь ввести значение Null. - person Karthik Samyak; 27.02.2018
comment
@AdKossa, все, что вам нужно, это инициализировать массив, в который вы пытаетесь передать данные, вы должны просто объявить массив, но не инициализировать его - person Vivek Doshi; 27.02.2018