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

 }

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}

接口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[]>

更新

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

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

然后应返回IProduct[]的项目 as 。您也可以暂时将tap运算符放到那里，只是为了确认response的样子。

END UPDATE

所以在您的订阅中：

    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有一些魔术可以处理Observables并为您订阅？否……不是。我只是看了看文档中的示例，它们都是手动订阅的。）

无法将Observable用作MatTable的数据源，显示为空

1 个答案: