类变量在 Angular 8 中的订阅之外不会持久存在

Question

类变量counties，不保留在fetchCounties((上的订阅方法中分配的值。 记录临时变量数据会返回一个很好的县列表，订阅内部的 this.counties 也是如此，但是一旦我尝试在订阅之外访问它，它就会变得未定义。 来自 Java 背景并且是 Angular/Typescript 的新手，这对我来说毫无意义......

public counties: ICounty[] = [];  
public getCounties(): ICounty[] {
this.fetchCounties().subscribe(data =>{
console.log("data");
console.log(data);//logs correctly
this.counties = data;
console.log("counties inside subscribe " );
console.log(this.counties);//logs correctly
});
console.log("counties outside of subscribe " );
console.log(this.counties);//logs incorrectly (empty) >:0
return this.removeInvalidCounties(this.counties); //passes empty counties list...
}

Answer 1

要解决此问题，您可以执行以下操作：

public getCounties(): Observable<ICounty[]> {
return this.fetchCounties().pipe(
map(counties => {
// write your logic here in what makes a county valid, I will say it has to have a name
return counties.filter(county => county.name);
}),
);
}

然后，您可以将其用作可观察量：

this.countiesService.getCounties().subscribe(counties => {...});

然后在您的组件中，您可以执行以下操作：

counties: ICounty[];
constructor(private countiesService: CountiesService) {}
ngOnInit() {
this.countiesService.fetchCounties().subscribe(counties => this.counties = counties);
}

然后，html可以是：

<li *ngFor="let county of counties">{{ county }}</li>

或者更好的是，使用异步管道在视图被销毁时自动取消订阅：

counties$ = this.countiesService.fetchCounties();

然后在 HTML 中：

<li *ngFor="let county of counties$ | async">{{ county }}</li>

================关于您的问题，您如何等待订阅完成再继续，您可以将其转换为承诺，尽管我不建议这样做。

public counties: ICounty[] = [];
// Typescript might complain here, saying an async function has to return a promise
public async getCounties() { 
this.counties = await this.fetchCounties().pipe(take(1)).toPromise();
return this.removeInvalidCounties(this.counties);
}

Answer 2

这是因为您尝试在异步调用完成之前访问数组(fetchCounties(。

public counties: ICounty[] = [];  
public getCounties(): ICounty[] {
// step 1
this.fetchCounties().subscribe(data =>{
// step 3 because is asynchronous and it depends on the time of the call required.
});
// step 2
return this.removeInvalidCounties(this.counties);
}

我不知道你想做什么。但可能，您应该在订阅中执行删除无效县。

更新：如果您尝试过滤您尝试使用的国家/地区。你可以这样做。

public getCounties(): ICounty[] {
this.fetchCounties()
.pipe(map(countries => this.removeInvalidCounties(counties)))
.subscribe(data =>{
this.counties = data ;
});
}