Angular 等待服务Api调用在8中完成

我正在尝试我的第一个Angular 8 Crud Web应用程序，并编写了一个页面，列出了WebApi中的一些公司名称

我的服务正在正确地获取数据，我能够在控制台上打印数据

//Service.ts
export class CompanyService {
  allCompanys: Company[]
  constructor(private httpClient: HttpClient) { }
  // Returns all the companys
  GetAll(): Company[] {

    this.httpClient.get<Company[]>('https://localhost:565656/api/company').subscribe(result => {
      this.allCompanys = result;

      //Shows data Sucessfully from Server :Working fine
      console.log(this.allCompanys);

    }, error => console.error(error));

    return this.allCompanys;
  }

我的html看起来像下面的表格，没有显示

  //html

      <tr *ngFor="let company of Companylist">
      <td>{{company.Name}}</td>
      <td>{{company.Phone}}</td>
      <td>{{company.Email}}</td>
      <td>{{company.Address}}</td>
       < /tr>

//html
{{company.Name}
{{company.Phone}}
{{company.Email}
{{公司地址}

我也尝试了可观察性，但不起作用。我需要在调用api后绑定变量。有人能告诉我哪里做错了吗

---

我已经检查了SO中的类似情况，但找不到类似的内容（我可能不理解）

http请求作为异步操作完成，因此将开始请求，但执行

getAll

asynchronous SO将立即返回语句并返回每个

所有公司的
所拥有的内容

要解决这个问题，您需要更新GetAll以返回一个可观察的

GetAll(): Observable<Company[]> {
   return  this.httpClient.get<Company[]>('https://localhost:565656/api/company')
}

我们可以使用async管道简化上述代码

Companylist$ : Observable<Company[]>;

ngOnInit(){

Companylist$ = this.companyService.GetAll();

}

Companylist$：可见；
恩戈尼尼特（）{
Companylist$=this.companyService.GetAll（）；
}

模板


...

异步管道订阅可观察对象并返回其发出的最新值

在服务中，
this.allCompanys
甚至在您得到响应之前就被同步返回。因此它返回
未定义的
。但是当响应到来时，组件不再检查更新

因此，您需要异步更新该值

GetAll(): Company[] {
    return this.httpClient.get<Company[]>('https://localhost:565656/api/company');
}

最容易理解的代码

在组件ts中：

在您的服务中，ts：

GetAll（回调？：函数）{
this.httpClient.get（'https://localhost:565656/api/company）。订阅（结果=>{
this.allCompanys=结果；
//成功显示来自服务器的数据：工作正常
console.log（this.allCompanys）；
如果（回调）{
回调（this.allCompanys）；
}
}，error=>console.error（error））；
}
问题是因为在异步调用
this.httpClient.get（）之前返回了
this.allCompanys
https://localhost:565656/api/company）
得到解决

您可以返回一个可观察的公司[]，如return this.httpClient.get（“”），并在视图中捕获它，如
allCompanys | async
或者，您可以从方法中删除该返回公司[]类型，并将其替换为空，删除该返回并让
this.allCompanys=result
像订阅中一样，这样您还可以控制它的值（当它得到解决时），如
if（this.allCompanys）{//Do something}
当您这样分配变量时，它不会等待异步请求的结束，GetAll（）方法应该返回一个可观察对象并在组件内部订阅它，然后在可观察对象完成时分配您的局部变量
Companylist$ : Observable<Company[]>;

ngOnInit(){

Companylist$ = this.companyService.GetAll();

}

<tr *ngFor="let company of Companylist$ | async">
...
</tr>

GetAll(): Company[] {
    return this.httpClient.get<Company[]>('https://localhost:565656/api/company');
}

this.companyService.GetAll().subScribe((res) => {
    this.Companylist = res;
}, error => console.error(error)
)

ngOnInit() {
    // callback gets executed when your service gets the response in the API call
    const callback = function(companyList: Company[]) {
      this.Companylist = companyList;
    }
    this.companyService.GetAll(callback);
    console.log("At Component " + this.Companylist)
}

GetAll(callback?: Function) {

    this.httpClient.get<Company[]>('https://localhost:565656/api/company').subscribe(result => {
      this.allCompanys = result;

      //Shows data Sucessfully from Server :Working fine
      console.log(this.allCompanys);
      if(callback) {
        callback(this.allCompanys);
      }

    }, error => console.error(error));
}