在Typescript中解析JSON对象

我对使用spring boot的Angular和building服务都是新手。因此，如果下面的问题很简单，请原谅

我有来自SpringREST服务的以下JSON响应。我正在尝试将此服务响应映射到角度材质数据表

但是，由于我还不熟悉Angular、Typescript和解析json对象，您能否帮助我指出如何将下面列出的json响应映射到我的接口

JSON响应

{
    "content": [
        {
            "id": "1000",
            "name": "R&D IN",
            "location": "IN",
            "costCenter": "RD-001"
        }
    ],
    "last": false,
    "totalElements": 10,
    "totalPages": 10,
    "size": 1,
    "number": 1,
    "sort": [
        {
            "direction": "ASC",
            "property": "name",
            "ignoreCase": false,
            "nullHandling": "NATIVE",
            "ascending": true,
            "descending": false
        }
    ],
    "first": false,
    "numberOfElements": 1
}

我需要在上面的json响应中映射以下两个属性-> 内容和总记录

getAllDepartments(filter: string, sortOrder: string, pageNumber: number, pageSize: number): Observable<DepartmentList>{

    return this.http.get<DepartmentList>(this.API_URL + '/api/department/', {
      params: new HttpParams()
          .set('filter', filter)
          .set('sort', 'name')
          .set('page', pageNumber.toString())
          .set('size', pageSize.toString())
    });
  }

this.deptService.getAllDepartments(filter, sortDirection,pageIndex, pageSize)
      .pipe(
          catchError(() => of([])),
          finalize(() => this.loadingSubject.next(false)))
      .subscribe(
          departments => {
            let obj = JSON.stringify(departments);
            console.log('Department List :: ', departments);
            console.log(obj.content);
            this.departmentSubject.next(departments.content);
            this.departmentRecCount.next(departments.totalElements);
          });

export interface DepartmentList {
    content: Department[];
    totalElements: number;
  }

  export interface Department {
    id: string;
    name: string;
    location: string;
    costCenter: string;
  }

我有以下的服务代码

部门服务.ts

getAllDepartments(filter: string, sortOrder: string, pageNumber: number, pageSize: number): Observable<DepartmentList>{

    return this.http.get<DepartmentList>(this.API_URL + '/api/department/', {
      params: new HttpParams()
          .set('filter', filter)
          .set('sort', 'name')
          .set('page', pageNumber.toString())
          .set('size', pageSize.toString())
    });
  }

this.deptService.getAllDepartments(filter, sortDirection,pageIndex, pageSize)
      .pipe(
          catchError(() => of([])),
          finalize(() => this.loadingSubject.next(false)))
      .subscribe(
          departments => {
            let obj = JSON.stringify(departments);
            console.log('Department List :: ', departments);
            console.log(obj.content);
            this.departmentSubject.next(departments.content);
            this.departmentRecCount.next(departments.totalElements);
          });

export interface DepartmentList {
    content: Department[];
    totalElements: number;
  }

  export interface Department {
    id: string;
    name: string;
    location: string;
    costCenter: string;
  }

然而，最后两行显示了我的角度误差。然而，尽管有错误，代码仍然可以工作

下面两行显示了错误-

this.departmentSubject.next(departments.content);
this.departmentRecCount.next(departments.totalElements);

错误消息-错误TS2339:类型“any[]| DepartmentList”上不存在属性“content”。类型“any[]”上不存在属性“content”

部门.model.ts

getAllDepartments(filter: string, sortOrder: string, pageNumber: number, pageSize: number): Observable<DepartmentList>{

    return this.http.get<DepartmentList>(this.API_URL + '/api/department/', {
      params: new HttpParams()
          .set('filter', filter)
          .set('sort', 'name')
          .set('page', pageNumber.toString())
          .set('size', pageSize.toString())
    });
  }

this.deptService.getAllDepartments(filter, sortDirection,pageIndex, pageSize)
      .pipe(
          catchError(() => of([])),
          finalize(() => this.loadingSubject.next(false)))
      .subscribe(
          departments => {
            let obj = JSON.stringify(departments);
            console.log('Department List :: ', departments);
            console.log(obj.content);
            this.departmentSubject.next(departments.content);
            this.departmentRecCount.next(departments.totalElements);
          });

export interface DepartmentList {
    content: Department[];
    totalElements: number;
  }

  export interface Department {
    id: string;
    name: string;
    location: string;
    costCenter: string;
  }

我如何解决上述问题

---

如果已经在任何其他线程中对此进行了解释，请原谅。

在分配之前，请尝试键入cast

departments

const deptList = departments as DepartmentList;

this.departmentSubject.next(deptList.content);
this.departmentRecCount.next(deptList.totalElements);