Typescript - 空数组引用
Typescript - null array reference
我正在 typescript/angular 中编写应用程序,我有一个服务可以获取 json 数据,我想显示这个下载对象,但对象可能更多比我可以在一个 html 组件中显示,所以我应该拆分这个对象数组。顺便说一下,在那之前我应该通过 ip 地址过滤来自 json 的所有对象,所以我写了这样的组件:
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) { }
}
但是我不能使用过滤功能,因为pods数组是空的,但是为什么??
考虑到 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
});
For more detail please follow // Execution Flow : #number
, this way
the whole execution flow will be executed
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
}
我正在 typescript/angular 中编写应用程序,我有一个服务可以获取 json 数据,我想显示这个下载对象,但对象可能更多比我可以在一个 html 组件中显示,所以我应该拆分这个对象数组。顺便说一下,在那之前我应该通过 ip 地址过滤来自 json 的所有对象,所以我写了这样的组件:
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) { }
}
但是我不能使用过滤功能,因为pods数组是空的,但是为什么??
考虑到 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
});
For more detail please follow
// Execution Flow : #number
, this way the whole execution flow will be executed
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
}