如何在 Angular 应用程序中从服务器获取 API 数据？

Question

我在组件中写入数据时遇到问题。我在控制台中写入对象数据，但我不知道如何将数据从对象获取到组件。我从服务器到控制台获取的这些数据： IMAGE。我需要提取对象数据或其他东西？

在控制台中我有这个错误：错误类型错误：您提供了一个无效的对象，其中需要一个流。您可以提供 Observable、Promise、Array 或 Iterable。

你知道怎么解决吗？感谢您的帮助。

我的代码： app.component.ts

codeLists: CodeLists[] = [];
    
    
      constructor(
        private codeListService: CodeListService,
        private codeListsAdapter: CodeListsAdapter,
      ) { }
    
      ngOnInit(): void {
        this.getCodeLists();
      }
    
      public getCodeLists() {
        this.labService.getAllLists().subscribe(response => {
          this.codeLists = [];
          console.log(response);
          from(response).subscribe((CodeListsRaw: CodeLists) => {
              this.codeLists.push(this.codeListsAdapter.adapt(CodeListsRaw));
            });
        });
      }
    }

app.component.html

<div *ngFor="let list of codeLists">
  <mat-card>
    <mat-card-title>{{list.id}}</mat-card-title>
    <h1>{{list.name}}</h1>
  </mat-card>
</div>

代码-list.service.ts

getAllLists(){
    return this.http.get<any>(environment.ApiUrl + `/api/url`);
  }

codelists.ts - 型号

export class CodeLists {
   id: string;
   name: string;
}

Answer 1

其实你不需要订阅回复。

响应是您的对象，而不是可观察对象。此外，您可以使用解构。试试这个：

public getCodeLists() {
  this.labService.getAllLists().subscribe(({ codeLists, productList }) => {
    console.log(codeLists, productList);
    codeLists.codeLists.map(codeList => // I edited this line
      this.codeLists.push(this.codeListsAdapter.adapt(codeList)));
  }
}

更多关于解构的信息：https://basarat.gitbook.io/typescript/future-javascript/destructuring

如何在 Angular 应用程序中从服务器获取 API 数据？

How to GET API data from server in Angular App?

angular

api

angular2-services