title: Cannot use Observable as DataSource for MatTable , appears empty
body: <p>I've been trying to use an array of products that's being returned by subscribing to the corresponding service.
  It works fine when it comes to displaying the objects properties on a list or something similar but I've been struggling to use the Material component data-table. 
  I tried to do it by instantiating a new MatTableDataSource with the products array as an argument and to use try dynamic datasource by using the Observable directly but no success so far, the table is empty and the console is silent.</p>
  
  <p>Here is the service : </p>
  
  <pre><code>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&lt;IProduct[]&gt; {
      return this.http.get&lt;IProduct[]&gt;(this.productUrl);
    }
  
   }
  </code></pre>
  
  <p>The TypeScript file :</p>
  
  <pre><code>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 =&gt; {
          this.products = response.items;
          console.log(this.products);
        }
      );
    }
  }
  export class ProductDataSource extends DataSource&lt;any&gt; {
    constructor(private productService: ProductService) {
      super();
    }
    connect(): Observable&lt;IProduct[]&gt; {
      return this.productService.getProducts();
    }
    disconnect() { }
  }
  </code></pre>
  
  <p>And lastly the HTML</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8"&gt;
  
    &lt;!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" --&gt;
    &lt;!-- Position Column --&gt;
    &lt;ng-container matColumnDef="productId"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Id &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let product"&gt; {{product.productId}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef="displayName"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Nom &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let product"&gt; {{product.displayName}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Weight Column --&gt;
    &lt;ng-container matColumnDef="price"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Prix &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let product"&gt; {{product.price}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Symbol Column --&gt;
    &lt;ng-container matColumnDef="stockQuantity"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Quantité &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let product"&gt; {{product.stockQuantity}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Also I don't know if it's linked but at the subscription :</p>
  
  <pre><code>ngOnInit() {
          this.productService.getProducts()
            .subscribe(
            response =&gt; {
              this.products = response.items;
              console.log(this.products);
            }
          );
  </code></pre>
  
  <p>UPDATE Incoming Data from API :</p>
  
  <pre><code>{"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}
  </code></pre>
  
  <p>And the interface IProduct :</p>
  
  <pre><code>export interface IProduct {
    name: string;
  
    price: number;
  
    productId: number;
  
    description: string;
  
    status: number;
  
    stockQuantity: number;
  
    displayName: string;
  
    productFlags: number;
  
    xmlData: string;
  
    blob: any;
  }
  </code></pre>
  
  <p>UPDATE 2 : Stackblitz for the app : <a href="https://stackblitz.com/edit/angular-6xjfmf?embed=1&amp;file=src/app/product.service.ts" rel="noreferrer">https://stackblitz.com/edit/angular-6xjfmf?embed=1&amp;file=src/app/product.service.ts</a></p>
  
  <p><strong>FINAL UPDATE AND SOLUTION</strong> : So part of the solution was given by Deborah bellow, I had to use products as the datasource directly :</p>
  
  <pre><code>&lt;table mat-table [dataSource]="products" class="mat-elevation-z8"&gt;
  </code></pre>
  
  <p>Also I still had the issue of not being able to get the items part of my response when subscribing, as it was considered an object and simply doing response.items wasn't working because items wasn't a property of Object.</p>
  
  <p>The solution was easy I just had to do it in two steps :</p>
  
  <pre><code>ngOnInit() {
      this.productService.getProducts()
        .subscribe(
        response =&gt; {
          this.products = response;
          this.products = this.products.items;
          console.log(this.products);
        }
      );
    }
  </code></pre>
  
  <p>There you go , I hope it helps somebody in the same situation. 
  Thanks to Deborah!</p>