How to fix type is missing from following property in angular?

Issue

I worked for the past 2 years on angular, but this is the first time I am using the interface. I face a small issue added below.

Type 'MatTableDataSource<Tasks[]>' is missing the following properties from type 'Tasks[][]': length, pop, push, concat, and 24 more.ts(2740)

Please help me to solve this small issue. Below is my code.

export interface Tasks {
  id: string;
  title: string;
  description: string;
  assignedTo: Array<Team>,
  status: string;
}

Service

 getTasks(): Observable<Tasks[]> {
    return this.http.get<Tasks[]>(`${environment.API_URL}tasks`).pipe(
      map(data => {
        return data;
      })
    )
  }

component file

getTasks() {
    this.taskService.getTasks().subscribe(response => {
      // this.tasks = response;
      console.log(response)
      if (this.tasks) {
        this.dataSource.data = new MatTableDataSource<Tasks[]>(response)
      }
      console.log(this.tasks)
    })
  }

Any solution is appreciated!

Solution

You don't need to set the type of MatTableDataSource as Tasks[]. Internally MatTableDataSource treats your type as T[].

dataSource = new MatTableDataSource<Tasks>() // Tasks represents each row of the mat-table

getTasks() {
  // your code
  this.dataSource.data = response
}

I think you should rename your interface to Task and not Tasks. Because it represents only one Task.

Answered By - hawks