I've checked the other questions on this topic here but none seemed to solve my problem. I'm pulling a list of noticeboard notices from an API as an observable and trying to display them in a table. The table headers render but no rows. I can get the data to render if I use Pre tags and the variable but assigning it to dataSource isn't working - and no errors.

Service snippet

```
getObjectWithParams(object: any, params: any): Observable<any> {
        this.ResourcePath = object;
        const NewQueryOptions = this.QueryOptions + params;
        return this.http.get(`${this.ServiceRoot}${this.ResourcePath}${NewQueryOptions}`, { 'headers': this.headers });
    }

```

notices.component.ts

```
export class NoticesComponent implements OnInit {

  public notices!: INotice[];

  displayedColumns: string[] = ['ReleaseDate', 'ReleaseTag','Status', 'Title']
  dataSource!: MatTableDataSource<INotice>;

  pageSize   = 10;
  pageIndex  = 0;
  pageLength = 0;

  private _top: number | undefined;
  private _skip: number | undefined;

  constructor( private OData: ODataService, private _location: Location) {}

ngOnInit(): void {
   this.getNotices('/notices', '$count=true&$top=10'); 
}

public getNotices(table: string, params: string) {
  this.OData.getObjectWithParams(table, params)
    .subscribe( data =>  {
      this.notices = data,
      this.dataSource = new MatTableDataSource<INotice>(this.notices);
    }); 
  }
}

```

notices.component.html

```
<Div *ngIf="dataSource">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>

            <ng-container matColumnDef="ReleaseDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Release Date </th>
            <td mat-cell *matCellDef="let notice"> {{notice.ReleaseDate}} </td>
            </ng-container>

            <ng-container matColumnDef="ReleaseTag">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Release Tag </th>
            <td mat-cell *matCellDef="let notice"> {{notice.ReleaseTag}} </td>
            </ng-container>

            <ng-container matColumnDef="Status">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
            <td mat-cell *matCellDef="let notice"> {{notice.Status}} </td>
            </ng-container>

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

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <!--<pre> {{ notices | json }}</pre> -->
</Div>

```

I'm hoping another set of eyes may spot the issue easily so appreciate any insights in what I'm doing wrong.

Thanks.