Невозможно привязать данные к таблице данных материалов Angular

Проблема

У меня проблема с привязкой данных JSON к таблице данных Angular Material.

Фон

Я разрабатываю небольшое приложение, которое предназначено для предоставления пользователям информации о фильмах. Вызов API инициируется после того, как пользователь запускает поиск. Затем это должно заполнить таблицу данных данными ответа.

Хотя я могу успешно выполнить вызов API, данные в таблицу данных не передаются:

Ответ API в инструментах разработчика

Кроме того, в консоли не отображаются ошибки, и я могу заполнить таблицу тестовыми данными.

Вот код:

api-calls.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';

@Injectable()
export class ApiService {
constructor(private https:HttpClient){}

public getFilms(searchTerm): Observable<any> {
  const apiUrl = 'https://www.omdbapi.com/?apikey=b1464edd&s=';
  const fullLink = apiUrl + searchTerm
  return this.http.get(fullLink)
}}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Films } from './models/films.model';
import { ApiService } from './services/api-calls.service';
import { MatTableDataSource } from '@angular/material';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{

constructor(private apiService:ApiService) {}

displayedColumns: string[] = ['title', 'year', 'imdbID', 'poster', 'type']
dataSource: MatTableDataSource<any[]>;
searchTerm = '';

handleSearch(event) {
  if(event.action === 'SEARCH') {
    this.searchTerm = event.query
    this.apiService.getFilms(this.searchTerm).subscribe(
      data => this.dataSource = new MatTableDataSource<Films[]>(data)
    )}
  }

  ngOnInit() {
  }
}

app.component.html (функция поиска, описанная в классе контейнера, обрабатывается в другом компоненте)

<div class = "container">
      <mat-card>
          <h2>Lightweight IMDb Search Engine</h2>
          <app-search (searchEvent)="handleSearch($event)"></app-search>
      </mat-card>

      <div>
        <mat-table [dataSource] = "dataSource">
          <ng-container matColumnDef="title">
            <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
            <mat-cell *matCellDef="let films"> {{ films.title }}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="year">
            <mat-header-cell *matHeaderCellDef> Year </mat-header-cell>
            <mat-cell *matCellDef="let films"> {{ films.year }}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="imdbID">
            <mat-header-cell *matHeaderCellDef> imdbID </mat-header-cell>
            <mat-cell *matCellDef="let films"> {{ films.imdbID }}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="poster">
            <mat-header-cell *matHeaderCellDef> Poster </mat-header-cell>
            <mat-cell *matCellDef="let films"> {{ films.poster }}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="type">
            <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>
            <mat-cell *matCellDef="let films"> {{ films.type }}</mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
        </mat-table>
      </div>
  </div>

film.model.ts

export interface Films {
    title: string;
    year: string;
    imdbID: string;
    poster: string;
    type: string;
}

Подтвердите, что данные, которые возвращаются, имеют ожидаемую форму и не вложены или что-то в этом роде   —  person RuffMingani    schedule 08.03.2020

Интересно, что с кодом, который я предоставил, когда я пробую console.log (data) или console.log (dataSource), он возвращается с undefined. Попробую получить запись данных в консоль.   —  person RuffMingani    schedule 08.03.2020

Значит, проблема в форме мероприятия. Оцените это: omdbapi.com/?apikey=b1464edd&s=hello обратите внимание на ответ фильмы вложены в свойство поиска, поэтому вам также нужно будет добавить другую услугу, например return this.http.get(fullLink).pipe(map(r => r.Search))   —  person RuffMingani    schedule 08.03.2020

Добавьте код для app-search   —  person RuffMingani    schedule 08.03.2020

Спасибо, return this.http.get(fullLink).pipe(map(r => r.Search)). Кроме того, мне потребовалось изменить film.model.ts из-за чувствительности к регистру.   —  person RuffMingani    schedule 08.03.2020

Теперь он работает?   —  person RuffMingani    schedule 08.03.2020

Это да! Извините, вчера я не закончила фразу. Спасибо за твою помощь.   —  person RuffMingani    schedule 09.03.2020