如何在 Angular 材质表中正确显示来自 MongoDB 的 JSON 数据

Question

渴望

我正在尝试从 MongoDB 中提取数据并将其显示在 Angular Material Table 中。

问题

虽然我在登录到控制台/终端时能够看到我的 MongoDB 调用的结果，但 Chrome 浏览器控制台告诉我我的 JSON 数据已存储到“window.json”中，我不知道如何在我的应用程序中引用它。如果我将一些测试 JSON 数据硬编码到我的应用程序中并引用它而不是尝试从 MongoDB 调用，那么数据会毫无问题地填充到我的 Angular 材料表中。

配置

我有一个 Express/Node 应用程序正在调用 MongoDB 并通过 http 调用提供数据。我有一个单独的 Angular 应用程序，它试图对 Express/Node 应用程序进行 http 调用，以使用来自 MongoDB 的 JSON 并将其显示在材料表中。所有应用程序和 MongoDB 都在我的计算机（Windows 10）上本地运行。 软件包版本：

• 节点 9.3.0
• TypeScript 2.6.2
• Express 4.16.2
• MongoDB 节点驱动程序 2.2.33
• Angular 5.x

电影集合中的 MongoDB 数据示例

{
        "_id" : ObjectId("56918f5e24de1e0ce2dfccc3"),
        "title" : "Once Upon a Time in the West",
        "year" : 1968,
        "imdb" : "tt0064116",
        "type" : "movie"
}
{
        "_id" : ObjectId("56918f5e24de1e0ce2dfccc4"),
        "title" : "A Million Ways to Die in the West",
        "year" : 2014,
        "imdb" : "tt2557490",
        "type" : "movie"
}
{
        "_id" : ObjectId("56918f5e24de1e0ce2dfccc5"),
        "title" : "Wild Wild West",
        "year" : 1999,
        "imdb" : "tt0120891",
        "type" : "movie"
}
{
        "_id" : ObjectId("56918f5e24de1e0ce2dfccc6"),
        "title" : "West Side Story",
        "year" : 1961,
        "imdb" : "tt0055614",
        "type" : "movie"
}
{
        "_id" : ObjectId("56918f5e24de1e0ce2dfccc7"),
        "title" : "Slow West",
        "year" : 2015,
        "imdb" : "tt3205376",
        "type" : "movie"
}

Angular 应用程序（前端）

请注意，Angular 应用程序是使用 Angular CLI 创建的。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { TestService } from './services/test.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatPaginatorModule,
    HttpClientModule
  ],
  providers: [TestService],
  bootstrap: [AppComponent]
})
export class AppModule { }

test.service.ts

“serviceUrl”路径通过在后端 Express 应用程序中使用以下代码提供来自 MongoDB 的数据数组：

让movieResults = await db.collection("movies").find().toArray();

返回电影结果；

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Movie } from '../models/movie.model';

@Injectable()
export class TestService {

  private serviceUrl = 'http://localhost:3000/moviesdb';

  constructor(private http: HttpClient) {}

  getTest(): Observable<Movie[]> {
    return this.http.get<Movie[]>(this.serviceUrl);
  }
}

movie.model.ts

export interface Movie {
  title: string;
  year: number;
  imdb: string;
  type: string;
}

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { DataSource } from '@angular/cdk/collections';
import { Movie } from './models/movie.model';
import { TestService } from './services/test.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'My App';
  displayedColumns = ['title', 'year', 'imdb', 'type'];
  
  movies: Movie[];
  dataSource = new TestDataSource(this._testService);

  constructor(private _testService: TestService) {}
  
  ngOnInit(){}
}

export class TestDataSource extends DataSource<any> {
  constructor(private _testService: TestService) {
    super();
  }

  connect(): Observable<Movie[]> {
    return this._testService.getTest();
  }
  disconnect() {}
}

app.component.html

<div style="text-align:center">
  <h1 id="title">
    Welcome to {{ title }}!
  </h1>
</div>

<div class="example-container mat-elevation-z8">
  <h2>Here are some movies you may be interested in:</h2>
  <mat-table #table [dataSource]="dataSource">

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

    <!-- Year Column -->
    <ng-container matColumnDef="year">
      <mat-header-cell *matHeaderCellDef> Year </mat-header-cell>
      <mat-cell *matCellDef="let movie"> {{movie.year}} </mat-cell>
    </ng-container>

    <!-- IMDB Column -->
    <ng-container matColumnDef="imdb">
      <mat-header-cell *matHeaderCellDef> IMDB </mat-header-cell>
      <mat-cell *matCellDef="let movie"> {{movie.imdb}} </mat-cell>
    </ng-container>

    <!-- Type Column -->
    <ng-container matColumnDef="type">
      <mat-header-cell *matHeaderCellDef> Type </mat-header-cell>
      <mat-cell *matCellDef="let movie"> {{movie.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>

引用的文章

• getting angular material table to work properly with api call
• Properly display JSON in table angular
• How to pass json data received from service to an array in component in angular material for angular 4
• Developing Node.js Apps Using TypeScript and MongoDB

非常感谢您提供的任何指导！

Answer 1

物料表组件使用“dataSource”变量，因此您需要在使用 OnInit 的服务响应中使用“datasource”。

一个例子：

ngOnInit() {
this._humanService.getHumans().subscribe(
  resp => {
    this.dataSource  = new MatTableDataSource(resp);
  }, err => {
    console.log(err);
  });

}