Angular 错误TS2339:类型“TaskInterface[]上不存在属性“data”

我目前正在尝试使用Angular 8从api中获取数据。数据应具有TaskInterface的结构

请参阅我的代码和下面的说明：

任务接口：

export interface TaskInterface {
 id: number;
 name: string;
 description: string;
 due_date: string;
 done: number;
 created_at: string;
 updated_at: string;
 user: object;
}

任务列表服务：

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {TaskInterface} from './task-interface';

@Injectable({
 providedIn: 'root'
})

export class TaskListService {

private api = 'http://learning_database.test/api';

constructor(private http: HttpClient) {
}

getAll(): Observable<TaskInterface[]> {
  return this.http.get<TaskInterface[]>( `${this.api}/tasks`);
}
}

Api的响应数据表明this.tasks是一个对象。因此，数据不会通过模板中的ngFor，页面保持白色，控制台显示： 错误：尝试区分“[object]”时出错。只允许使用数组和可重用项。 对象中有一个包含键数据的数组。是否将密钥数据添加到subscribe方法中的task属性

this.tasks = task.data;

…将显示主题行中提到的错误消息，。。。 错误TS2339:类型“TaskInterface[]上不存在属性“data” …但数据在模板中以这种方式正确呈现

如果我在subscribe方法中强制转换task属性以键入any

this.taskService.getAll()
  .subscribe((task: any) => {
    this.tasks = task;
 });

…一切正常。但我认为这不是最佳实践，因为数据应该具有TaskInterface的类型

我应该在服务中通过.pipe和map转换数据吗？不幸的是，我不知道该怎么做

谢谢你的建议

任务列表组件的HTML文件：

<div class="ui middle aligned selection divided list">
 <div *ngFor="let task of tasks; let i = index">
  {{ task.id }}
 </div>
</div>

---

您可以更正getAll方法中的类型，如下所示：

getAll(): Observable<{data: TaskInterface[]}> {
  return this.http.get<{data: TaskInterface[]}>( `${this.api}/tasks`);
}

---

这里的线索是错误消息，它告诉我您的api返回一个对象，其中包含一个名为data的项，该项是数组？您需要使用此数据数组，而不是输入对象。

getAll(): Observable<{data: TaskInterface[]}> {
  return this.http.get<{data: TaskInterface[]}>( `${this.api}/tasks`);
}

this.taskService.getAll()
  .subscribe((task) => {
    this.tasks = task.data; // safe to use, because task is now {data: TaskInterface[]}
  });