如何使用 API 并在 Angular 11 中获得键入的响应？

Question

如何在正确使用 REST API 服务后 return 键入值作为我的响应？

这是我的 JSON 对象，它由 REST API:

生成

[
  {
    "isDeleted": false,
    "reasonDeleted": null,
    "createdDate": "2020-12-31T07:34:09.918Z",
    "modifiedDate": "2021-02-17T11:34:45.643322Z",
    "createdBy": "superadmin2",
    "modifiedBy": "jans",
    "id": 1,
    "branchCode": "JKT",
    "branchName": "Jakarta",
    "branchHead": 1,
    "branchViceHead": 2,
    "isActive": true
  }
]

这是我的模型：

export class Branch extends Audit {
    id: number;
    branchCode: string;
    branchName: string;
    branchHead: number;
    branchViceHead: number;
    isActive: boolean;
}

我想用 Angular 消耗我的 API，我是这样做的：

export class RESTService {

  headers = new HttpHeaders({
    'Content-Type': 'application/json'
  });

  constructor(private http: HttpClient) { }

  post<T>(url: string, body?: any, header?: HttpHeaders, param?: HttpParams): Observable<HttpResponse<T>> {
    return this.http.post<T>(url, body,
      {
        headers: header ? header : this.headers,
        observe: 'response',
        responseType: 'json',
        params: param
      });
  }

}

我创建了 RESTService class，所以我可以重用它，下面是我如何将它用作服务：

export class BranchService {

  constructor(private rest: RESTService) { }

  listBySpecificId(branchIds: number[]): Observable<any> {
    const request: RequestResponse<number[]> = new RequestResponse<number[]>(branchIds);

    return this.rest.post<Branch[]>(`${environment.apiUrl}${endpoint.branch.view_by_specific_id}`, request);
  }
}

这是我执行服务的方式：

fillDropList() {
    const listBranch = this.sharedService.currentUserValue.branch;
    let branches: Branch = new Branch();
    branches = this.branchService.listBySpecificId(listBranch);
    //going to do something for branches
}

但是当我将值添加到 branches:

时我的语法出现错误

TS2740: Type 'Observable ' is missing the following properties from type 'Branch': id, branchCode, branchName, branchHead, and 8 more.

如何将我的响应映射到我正确创建的类型化对象？

Answer 1

您的代码是正确的，但是 listBySpecificId 的 return 是可观察的，因此您需要使用另一种形式接收值，如下所示：

fillDropList() {
    const listBranch = this.sharedService.currentUserValue.branch;
    this.branchService.listBySpecificId(listBranch).subscribe((responseBranches) => {
      let branches = responseBranches
      //going to do something for branches
    });
    
}

如何使用 API 并在 Angular 11 中获得键入的响应？

How to consume API and get typed response in Angular 11?

observable

typescript

angular