title: Angular - mat-table render data
body: <p>I am using Angular 9, and I am trying to render a <a href="https://material.angular.io/components/table/overview" rel="nofollow noreferrer">Mat-Table</a>.</p>
  <p>If I use hard-coded data, it works perfectly, however if I use data from my service the values do not display in the table.</p>
  <p>For example, the below code loads the hard-coded <code>ELEMENT_DATA</code> into the table for the first second until the service data comes back.</p>
  <p><a href="https://i.stack.imgur.com/xAHbM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xAHbM.png" alt="enter image description here" /></a></p>
  <p>Then when the service data comes back, it just displays a list of empty rows in the table.</p>
  <p><a href="https://i.stack.imgur.com/zMPjI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zMPjI.png" alt="enter image description here" /></a></p>
  <p>This means that there is a problem loading the data coming back from the service.</p>
  <pre><code>   let resp: Observable&lt;Approvals[]&gt; = this.service.getApprovalList();
      resp.subscribe((approvals: Approvals[]) =&gt; {
        console.log(approvals);
        this.dataSource.data = approvals;
      });
  </code></pre>
  <p>The JSON data returned from the service:</p>
  <pre><code>[{&quot;organisation&quot;:&quot;xyz&quot;},{&quot;organisation&quot;:&quot;xyz&quot;},{&quot;organisation&quot;:&quot;xyz&quot;},{&quot;organisation&quot;:&quot;xyz&quot;},{&quot;organisation&quot;:&quot;xyz&quot;},{&quot;organisation&quot;:&quot;xyz&quot;},{&quot;organisation&quot;:&quot;xyz&quot;},{&quot;organisation&quot;:&quot;xyz&quot;}]
  </code></pre>
  <p>(if I copy this JSON into the hard-coded data, it displays correctly)</p>
  <p><strong>Question</strong></p>
  <p>Does anyone know what I am doing wrong, so that the live data does not display?</p>
  <p><strong>approval-list.component.html</strong></p>
  <pre><code>&lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;
    
      &lt;!-- organisation Column --&gt;
      &lt;ng-container matColumnDef=&quot;organisation&quot;&gt;
        &lt;th mat-header-cell *matHeaderCellDef&gt; Organisation &lt;/th&gt;
        &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.organisation}} &lt;/td&gt;
      &lt;/ng-container&gt;
    
      
      &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
    &lt;/table&gt;
    
  </code></pre>
  <p><strong>approval-list.component.ts</strong></p>
  <pre><code>export interface PeriodicElement {
    organisation: string;
  }
  
  const ELEMENT_DATA: PeriodicElement[] = [
    {organisation: '1'},
    {organisation: '2'},
    {organisation: '3'}
  ];
  
  @Component({
    selector: 'app-approval-list',
    templateUrl: './approval-list.component.html',
    styleUrls: ['./approval-list.component.css']
  })
  export class ApprovalListComponent implements OnInit {
  
    //ELEMENT_DATA: Approvals[];
    displayedColumns: string[] = ['organisation'];
    dataSource = new MatTableDataSource&lt;Approvals&gt;(ELEMENT_DATA);
  
    constructor(private service: ApprovalService) { }
  
    ngOnInit(): void {
      this.loadApprovalData();
    }
  
    public loadApprovalData(): void {
      let resp: Observable&lt;Approvals[]&gt; = this.service.getApprovalList();
      resp.subscribe((approvals: Approvals[]) =&gt; {
        console.log(approvals);
        this.dataSource.data = approvals;
      });
    }
  
  }
  </code></pre>
  <p><strong>approval.service.ts</strong></p>
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class ApprovalService {
  
    constructor(private http: HttpClient) { }
  
    public getApprovalList() : Observable&lt;any&gt; {
      let tokenStr: string = 'Bearer '+sessionStorage.getItem('jwt');
      const headers = new HttpHeaders().set(&quot;Authorization&quot;, tokenStr);
      return this.http.get(&quot;http://localhost:8080/approvals&quot;, {headers, responseType: 'text' as 'json'});
    }
  }
  </code></pre>
  <p><strong>approvals.ts</strong></p>
  <pre><code>export interface Approvals {
      organisation: string;
  }
  </code></pre>