json - 无法将数据绑定(bind)到 Angular Material 数据表

Question

问题

我在将 JSON 数据绑定(bind)到 Angular Material 数据表时遇到问题。

背景

我正在开发一个旨在为用户提供电影信息的小型应用程序。 API 调用在用户触发搜索后启动。然后应该用响应数据填充数据表。

虽然我可以成功进行 API 调用，但没有数据传递到数据表中:

API Response in Dev Tools

此外，控制台中没有显示任何错误，我可以用测试数据填充表格。

代码如下:

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 http:HttpClient){}

public getFilms(searchTerm): Observable<any> {
  const apiUrl = 'http://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>

电影.model.ts

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

Answer 1

API 返回的 JSON 具有以下形状

{
  "Search": [
    {"Title":"Hello, My Name Is Doris","Year":"2015","imdbID":"tt3766394","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMTg0NTM3MTI1MF5BMl5BanBnXkFtZTgwMTAzNTAzNzE@._V1_SX300.jpg"},
    // etc.
  ]
} 

因此你需要做一些调整。

首先，您需要投影响应，提取包含电影数组的 Search 属性。这应该在您的服务中完成(注意类型的改进使用)

api-calls.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import Film from './models/film.model';

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

  getFilms(searchTerm): Observable<Film[]> {
    const apiUrl = 'http://www.omdbapi.com/?apikey=b1464edd&s=';
    const fullLink = apiUrl + searchTerm;
    type Response = { Search: Film[] };
    return this.http.get<Response> (fullLink)
      .pipe(map(response => response.Search));
  }
}

然后我们需要在模型接口(interface)中声明属性名称，以正确描述响应中薄膜的形状

电影.model.ts

export default interface Film {
    Title: string;
    Year: string;
    imdbID: string;
    Poster: string;
    Type: string;
}

现在让我们调整组件本身来改进类型

app.component.ts

import { Component } from '@angular/core';
import { ApiService } from './services/api-calls.service';
import { MatTableDataSource } from '@angular/material';

import Film from './models/film.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  constructor(private apiService:ApiService) {}

  displayedColumns: (keyof Film)[] = ['Title', 'Year', 'imdbID', 'Poster', 'Type'];
  dataSource?: MatTableDataSource<Film[]>;
  searchTerm = '';

  handleSearch({ action, query }) {
    if (action === 'SEARCH' && query) {
      this.searchTerm = query;
      this.apiService.getFilms(this.searchTerm)
        .subscribe(films => this.dataSource = new MatTableDataSource(films));
    }
  }
}

请注意如何改进类型的使用以限制列的名称，它们在组件和服务之间保持同步。另请注意，冗余类型信息已得到改进，以利用从服务方法的改进类型签名流出的类型推断。