我正在尝试实现 refreshCountryList ，它应该 return countryList(array of objects) 包含所有国家的变量

Question

Country.component.ts

 countryList :any;
  searchvalue : string = "" ;

  constructor( private service : SharedService) { }
  
  ngOnInit(): void {
    this.refreshCountryList();
  }
  
  refreshCountryList(){
    this.service.getCountryList().subscribe(data=>{ this.countryList = data 
      console.log("countryList inside subscribe :",this.countryList ) ;
    });
    console.log( "list outside subscribe :" , this.countryList);
  }

shared.service.ts

export class SharedService {

  readonly APIUrl = "https://localhost:44383/api/CountryApi/";

  constructor(private http: HttpClient) { }
  
  getCountryList(){
    return this.http.get(this.APIUrl + 'listcountry');
  }


}

我无法在订阅外获取 countryList 值，范围仅位于订阅内。

如何获得订阅外的价值？

Answer 1

Angular 同步执行代码。 subscribe()实际上是在所有同步代码执行完后最后执行的。所以这一行在调用订阅之前首先执行。

console.log( "list outside subscribe :" , this.countryList);

但是，如果您只想查看输出，可以在 HTML 侧放置一个 JSON 管道，然后在视图中查看它。

<pre> <div [innerHTML]="this.countryList | json"></div> >/pre>

另一种方法是存储数据并调用一个方法来检查数据是否可用，该方法又可用于将逻辑放入其中。

countryList :any;
searchvalue : string = "" ;

constructor( private service : SharedService) { }
  
ngOnInit(): void {
  this.refreshCountryList();
}
  
mapData(){
  console.log(this.countryList);
}

refreshCountryList(){
  this.service.getCountryList().subscribe((data)=>{
    if(!data) return;
    this.countryList = data;
    console.log("countryList inside subscribe :",this.countryList ) ;
    this.mapData();
  });
  console.log( "list outside subscribe :" , this.countryList);
}

我正在尝试实现 refreshCountryList ，它应该 return countryList(array of objects) 包含所有国家的变量

I am trying to implement refreshCountryList , which should return countryList(array of objects) variable which contains all countries

search

list

subscribe

angular