title: Angular Material Sorting not works properly
body: <p>I have a data table with sorting, but the sorting works only if I use the same name in the <code>matCellDef</code> and in the template variable. Ex.:</p>
  
  <pre><code>&lt;ng-container matColumnDef="SS_KEY"&gt;
    &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Licenza &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let element" class="nome-col"&gt; {{element.SS_KEY}} &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>But if I use a method I have the data displayed but the sorting is not working (only the first two items are sorted):</p>
  
  <pre><code>&lt;ng-container matColumnDef="cliente"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; Cliente &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let element" class="nome-col"&gt; {{getCustomerName(element.SS_SC_ID)}} &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>this is the .ts file:</p>
  
  <pre><code>ngOnInit() {    
    this.fetchClienti();
  }
  
  fetchClienti() {
    this.clientiApi.getCustomers()
      .subscribe(clienti =&gt; {
        this.clienti = clienti;
      }, (err) =&gt; {
        console.log(err);
      });
  }
  
  getCustomerName(id) {
    let result = '';
    this.clienti.forEach((cliente) =&gt; {
      if (cliente['SC_ID'] === id) {
        result = cliente['SC_NOME'];
      }
    });
    return result;
  }
  </code></pre>
  
  <p>using <code>async</code> pipe does not solve the problem</p>
  
  <p>EDIT: here a Stackblitz that shows the issue: <a href="https://stackblitz.com/edit/ng-mat-sort-issue" rel="nofollow noreferrer">https://stackblitz.com/edit/ng-mat-sort-issue</a></p>
  
  <p>PS: the undefined error is not logged in my browser, only in stackblitz... by the way the sort is not working</p>
  
  <p>Thanks for help</p>