如何在 Angular App 中从服务器获取 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>

code-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