angular - 不能使用 Observable 作为 MatTable 的 DataSource，显示为空

Question

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

这是服务:

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);
  }

 }

typescript 文件:

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}

和接口(interface) 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 不起作用，因为项目不是 Object 的属性。

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

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 下的产品数组，则从服务代码中的项目获取产品:

  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属性(property)。

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

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

你应该得到你的产品 list 。

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

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

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

这:

dataSource = new ProductDataSource(this.productService);

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