Проблема привязки dataTable от сервисов

Question

У меня есть сервисы, которые получают данные, но когда я пытаюсь заполнить таблицу данных методом getPost ().

У меня есть сервисы, которые получают данные, но когда я пытаюсь заполнить таблицу данных из getPost () метод, он дал мне эту ошибку.Не удалось найти столбец с идентификатором "body".at getTableUnknownColumnError

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IPost } from './Ipost';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  url ="https://jsonplaceholder.typicode.com/posts";
  constructor(private http: HttpClient) { }
  

  public getPosts(): Observable<IPost[]> {
    return this.http.get<IPost[]>(this.url);
  }

  public getPosts2()  {
    return this.http.get(this.url);
  }
}


export interface IPost{
    id: any;
    title: any;
    body: any
  }

код в компоненте

import { Component, OnInit } from '@angular/core';
import { PostService } from '../services/post-services.service';
import { IPost } from '../services/Ipost';
@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {

  constructor(private service: PostService) { }
  displayedColumns: string[] = ['id', 'title', 'body'];
  // dataSource :IPost[] = [];
  dataSource;
  ngOnInit() {
    this.service.getPosts().subscribe(data => {
      console.log(data);
      this.dataSource = data['data'];

    }
    )
  }

}

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- Title Column -->
  <ng-container matColumnDef="title">
    <th mat-header-cell *matHeaderCellDef> Title </th>
    <td mat-cell *matCellDef="let element"> {{element.tilte}} </td>
  </ng-container>

  <!-- Body Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Body </th>
    <td mat-cell *matCellDef="let element"> {{element.body}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Я ожидаю показать данные почтовых служб в таблице

Answer 1

Поскольку в отображаемых столбцах третий столбец является "телом":

displayedColumns: string[] = ['id', 'title', 'body'];

Но в HTML третий столбец по умолчанию имеет значение "Вес":

  <!-- Body Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Body </th>
    <td mat-cell *matCellDef="let element"> {{element.body}} </td>
  </ng-container>

Решение:

1. Изменить с matColumnDef = "weight" на matColumnDef = "body"