Невозможно использовать Observable как DataSource для MatTable, отображается пустым

Question

Я пытался использовать массив продуктов, которые возвращаются при подписке на соответствующую услугу. Он отлично работает, когда дело доходит до отображения свойств объектов в списке или чем-то подобном, но я изо всех сил пытался использовать таблицу данных компонента Material. Я попытался сделать это, создав новый экземпляр MatTableDataSource с массивом products в качестве аргумента, и использовал динамический источник данных try, используя 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}

И интерфейс 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

ЗАКЛЮЧИТЕЛЬНОЕ ОБНОВЛЕНИЕ И РЕШЕНИЕ : Таким образом, часть решения была дана Деборой, я должен был использовать продукты в качестве источника данных напрямую:

<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[].Вы также можете временно добавить туда оператор 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);
      }
    );

И вы должны получить список продуктов.

Тогда я предполагаю, что вынеобходимо установить для свойства источника данных возвращаемый список продуктов:

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

ПРИМЕЧАНИЕ. Все вышеперечисленное игнорирует свойство dataSource в классе и вашем ProductDataSource классе.Если вы можете заставить работать вышеперечисленное, мы увидим, как мы можем изменить его для использования вашего более обобщенного кода.

This:

dataSource = new ProductDataSource(this.productService);

Никогда не получит никаких данных, потому что они неподписываться.(Если только в мат-таблице нет какой-то магии, которая обрабатывает Observables и подписывается на вас? Нет ... это не так. Я только что посмотрел примеры в документации, и все они подписываются вручную.)