不能使用 Observable 作为 MatTable 的数据源，显示为空

Question

我一直在尝试使用通过订阅相应服务而返回的一系列产品。当在列表或类似的东西上显示对象属性时，它工作正常，但我一直在努力使用 Material 组件数据表。我尝试通过使用 products 数组作为参数实例化一个新的 MatTableDataSource 并通过直接使用 Observable 来使用 try 动态数据源来做到这一点，但到目前为止没有成功，表是空的，控制台是静默的。

这是服务：

import { IProduct } from './../interfaces/IProduct';
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: "root"
})
export class ProductService {
  productUrl = "https://localhost:44355/product/getproducts";

  constructor(private http: HttpClient) { }

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl);
  }

 }

打字稿文件：

import { ProductService } from './../../services/product.service';
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { IProduct } from 'src/app/interfaces/IProduct';
import { Observable } from 'rxjs';
import { DataSource } from '@angular/cdk/collections';
import 'rxjs/add/observable/of';


@Component({
  selector: "app-product",
  templateUrl: "./product.component.html",
  styleUrls: ["./product.component.css"]
})
export class ProductComponent implements OnInit {
  public products = [];
  displayedColumns: string[] = ['productId', 'displayName', 'price', 'stockQuantity'];
  dataSource = new ProductDataSource(this.productService);

  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.productService.getProducts()
      .subscribe(
      response => {
        this.products = response.items;
        console.log(this.products);
      }
    );
  }
}
export class ProductDataSource extends DataSource<any> {
  constructor(private productService: ProductService) {
    super();
  }
  connect(): Observable<IProduct[]> {
    return this.productService.getProducts();
  }
  disconnect() { }
}

最后是 HTML

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

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->
  <!-- Position Column -->
  <ng-container matColumnDef="productId">
    <th mat-header-cell *matHeaderCellDef> Id </th>
    <td mat-cell *matCellDef="let product"> {{product.productId}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="displayName">
    <th mat-header-cell *matHeaderCellDef> Nom </th>
    <td mat-cell *matCellDef="let product"> {{product.displayName}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef> Prix </th>
    <td mat-cell *matCellDef="let product"> {{product.price}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="stockQuantity">
    <th mat-header-cell *matHeaderCellDef> Quantité </th>
    <td mat-cell *matCellDef="let product"> {{product.stockQuantity}} </td>
  </ng-container>

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

此外，我不知道它是否已链接，但在订阅处：

ngOnInit() {
        this.productService.getProducts()
          .subscribe(
          response => {
            this.products = response.items;
            console.log(this.products);
          }
        );

更新来自 API 的传入数据：

{"items":[{"productId":1,"name":"B12BocalVerreSoufflé","description":"Bocal en verre soufflé à la main et son couvercle en liège. Très bon état.","price":13.00,"status":100,"stockQuantity":1,"displayName":"Bocal en verre soufflé                                                                                                                                                                                  ","productFlags":0},{"productId":2,"name":"B30AssietteCampagne","description":"Lot de 4 assiettes en céramique. Décor en fleurs fait à la main. Bon état.","price":16.00,"status":100,"stockQuantity":36,"displayName":"Assiettes campagne                                                                                                                                                                                      ","productFlags":1},{"productId":3,"name":"B41BocalPommeHenkel","description":"Bocal en verre et couvercle en plastique. Décor pomme rouge de la marque Henkel des années 70. Bon état.","price":200.00,"status":100,"stockQuantity":11,"displayName":"Bocal pomme rouge Henkel                                                                                                                                                                                ","productFlags":0}

和接口 IProduct ：

export interface IProduct {
  name: string;

  price: number;

  productId: number;

  description: string;

  status: number;

  stockQuantity: number;

  displayName: string;

  productFlags: number;

  xmlData: string;

  blob: any;
}

更新 2：应用程序的 Stackblitz：https ://stackblitz.com/edit/angular-6xjfmf?embed = 1&file = src/app/product.service.ts

最终更新和解决方案：所以部分解决方案是由 Deborah bellow 提供的，我不得不直接使用产品作为数据源：

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

此外，我仍然遇到订阅时无法获取我的响应中的项目部分的问题，因为它被视为一个对象并且只是执行 response.items 不起作用，因为项目不是对象的属性。

解决方案很简单，我只需要分两步完成：

ngOnInit() {
    this.productService.getProducts()
      .subscribe(
      response => {
        this.products = response;
        this.products = this.products.items;
        console.log(this.products);
      }
    );
  }

你去吧，我希望它可以帮助处于相同情况的人。感谢黛博拉！

Answer 1

这段代码：

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl);
  }

是给你回 Observable<IProduct[]>

更新

如果从您的服务器返回的响应实际上包含 items 下的 product 数组，则从服务代码中的 items 中获取产品：

  getProducts(): Observable<IProduct[]> {
    return this.http.get<IProduct[]>(this.productUrl)
       .pipe(
         tap(response => console.log(response)),
         map(response => response.items);
       )
  }

那么这应该返回的项目作为的IProduct[]。您也可以tap暂时将操作员扔在那里，以确认您的response样子。

结束更新

所以在你的订阅中：

    this.productService.getProducts()
      .subscribe(
      response => {
        this.products = response.items;
        console.log(this.products);
      }
    );

response是 类型IProduct[]。它没有items财产。

尝试将上面的代码更改为：

    this.productService.getProducts()
      .subscribe(
      products => {
        this.products = products;
        console.log(this.products);
      }
    );

你应该得到你的产品清单。

然后我假设您需要将 datasource 属性设置为返回的产品列表：

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

注意：以上所有内容都忽略dataSource了类和您的ProductDataSource类中的属性。如果您可以使上述工作正常运行，我们可以了解如何修改它以使用您更通用的代码。

这个：

dataSource = new ProductDataSource(this.productService);

永远不会检索任何数据，因为它不订阅。（除非 mat-table 有一些处理 Observable 并为您订阅的魔法？不......它没有。我只是查看了文档中的示例，它们都手动订阅。）