javascript - Angular mat-tabell uppdateras inte när man använder observable

Jag har problem med att mat-tabellen inte laddar några nya data efter att den först har skapats. Jag har bytt från en vanlig HTML-tabell som använder ngFor för att generera raderna, vilket fungerade bra med samma datakälla. Detta är mat-tabellen HTML som jag använder:

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

    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let stock"> {{stock.symbol}} </td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef> Price </th>
      <td mat-cell *matCellDef="let stock"> {{stock.price}} </td>
    </ng-container>

    <ng-container matColumnDef="change">
      <th mat-header-cell *matHeaderCellDef> Change </th>
      <td mat-cell *matCellDef="let stock"> {{stock.change}} </td>
    </ng-container>

    <ng-container matColumnDef="changePercent">
      <th mat-header-cell *matHeaderCellDef> % Change </th>
      <td mat-cell *matCellDef="let stock"> {{stock.changePercent}} </td>
    </ng-container>

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

Detta är den vanliga HTML-tabellen som fungerade:

<table>
        <tr>
          <th>Symbol</th>
          <th>Price</th>
          <th>Change</th>
          <th>% Change</th>
        </tr>
        <tr *ngFor="let stock of stocks | async" class="stock">
          <td>{{ stock.symbol }}</td>
          <td>{{ stock.price }} {{ stock.currency }}</td>
          <td>{{ stock.change }}</td>
          <td>{{ stock.changePercent }}</td>
        </tr>
    </table>

Variabeln stocks är av typen Observable. Har du några förslag på varför tabellen inte längre uppdateras när värdet på "stock" ändras?

Redigera: Aktier ställs in med detta:

constructor(private storageService: StorageService){
 this.stocks = this.storageService.getAllStocks(); 
}

Funktionen getAllStocks() gör flera förfrågningar till ett API och returnerar dem sedan som en Observable

Redigera2:

getAllStocks(): Observable<any[]> {
return of(this.allStocks);

}

där allStocks är en lista över aktier inom en tjänst