title: matSort not working properly in mat-table Angular
body: <p>My .html file:</p>
  
  <pre><code>&lt;mat-table [dataSource]="dataSource" padding matSort&gt;
  
    &lt;ng-container matColumnDef="uid"&gt;
      &lt;!--&lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Building UID&lt;/mat-header-cell&gt;--&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;
        Building UID
      &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let tree" padding&gt;{{tree.uid}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="address"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;
        Address
      &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let tree" padding&gt;{{tree.location.address}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="zipCode"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;
        Zip code
      &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let tree" padding&gt;{{tree.location.zipCode}}&lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    ...
  
    &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
  
    &lt;mat-row *matRowDef="let row; columns: displayedColumns"&gt;&lt;/mat-row&gt;
  
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>My .ts file:</p>
  
  <pre><code>@Component({
    selector: 'page-buildings',
    templateUrl: 'buildings.html',
  })
  export class BuildingsPage {
    @ViewChild(MatSort) sort: MatSort;
    ...
    private displayedColumns: string[] = ["uid", "address", "zipCode", "city", "country", "treeDetails"]; // tslint:disable-line
    private dataSource: MatTableDataSource&lt;any&gt;;
  
    ...
    constructor(...) {
  
      this.dataSource = new MatTableDataSource(...);
      this.dataSource.sort = this.sort;
    }
    ...
  }
  </code></pre>
  
  <p><br>
  But in my mat-table, the sort only works for the first column "uid", not for the others. 
  <br><br>
  I've learnt from this <a href="https://stackoverflow.com/questions/46893164/mat-table-sorting-demo-not-working?rq=1">link</a>(first answer) that in <strong>*matColumnDef="firstString"</strong> and <strong>{{tree.secondString}}</strong>, <strong>firstString</strong> must equal to <strong>secondString</strong> to make it work, but in my case, it's <strong>tree.firstString.secondString</strong>, I've used two points. 
  <br><br>
  Any idea why this is happening and how to make it work?</p>
  
  <p><br>
  <br>
  Please look at the picture:
  <a href="https://i.stack.imgur.com/RuNb7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RuNb7.png" alt="enter image description here"></a></p>
  
  <p>When I click on column "Building UID", the mat-table will be sorted, everything works well. But when I click on other columns, (address, zip code, city, country), it will only sort the first two rows, and only the ascending sort works (the descending sort does not work), and the rest of the rows are not sorted at all.</p>