title: My view does not update when i change my array in *ngFor
body: <p>I'm trying to create some expansion panels with mat-table's inside, my problem is i have to resize my windows before my view will change. My data is loading fine and all but somehow my view does not update. My view where my expansion panels should be, is just all blank. Untill i click a button or resize my window. What can cause something like this?</p>
  
  <p>In my ngOnInit() i call </p>
  
  <pre><code>this.getSale1(); 
  </code></pre>
  
  <p>.HTML:</p>
  
  <pre><code>&lt;mat-accordion&gt;
      &lt;mat-expansion-panel *ngFor="let data of mySaleModelArray2 "&gt;
          &lt;mat-expansion-panel-header&gt;
              &lt;mat-panel-title&gt;
                  &lt;h6 class="salepanelheadtext"&gt;Bar:&lt;/h6&gt;{{data.name}}
              &lt;/mat-panel-title&gt;
          &lt;mat-panel-description&gt;
              &lt;h6 class="salepanelheadtext2"&gt;Total:&lt;/h6&gt; {{data.total_sales}}
          &lt;/mat-panel-description&gt;
          &lt;/mat-expansion-panel-header&gt;
              &lt;div class="example-container mat-elevation-z8"&gt;                                
                  &lt;mat-table #table [dataSource]="data.sales"  &gt;
                  &lt;!-- PLU Column --&gt;                                 
                  &lt;ng-container matColumnDef="pluNo"&gt;
                      &lt;mat-header-cell *matHeaderCellDef &gt;
                          #
                      &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let salesdata"&gt; 
                          {{salesdata.beerline}} 
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
                  &lt;!-- Name Column --&gt;
                  &lt;ng-container matColumnDef="name"&gt;
                      &lt;mat-header-cell *matHeaderCellDef&gt; Name &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let salesdata"&gt; 
                           {{salesdata.pluName}} 
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
                  &lt;!-- Sold_Count Column --&gt;
                  &lt;ng-container matColumnDef="sold_count"&gt;
                      &lt;mat-header-cell *matHeaderCellDef&gt; 
                          QTY 
                      &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let salesdata"&gt; 
                          {{salesdata.sold_count}} 
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
                  &lt;!-- PLU Price Column --&gt;
                  &lt;ng-container matColumnDef="pluPrice"&gt;
                      &lt;mat-header-cell *matHeaderCellDef&gt; Price &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let salesdata"&gt; 
                          {{salesdata.pluPrice}} 
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
                  &lt;!----&gt;
                  &lt;ng-container matColumnDef="total_amount"&gt;
                      &lt;mat-header-cell *matHeaderCellDef&gt; 
                          Total 
                      &lt;/mat-header-cell&gt;
                      &lt;mat-cell *matCellDef="let salesdata"&gt; 
                          {{salesdata.pluPrice * salesdata.sold_count}} 
                      &lt;/mat-cell&gt;
                  &lt;/ng-container&gt;
      &lt;mat-header-row *matHeaderRowDef="displayedColumns2"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns2;"&gt;&lt;/mat-row&gt;
              &lt;/mat-table&gt;
          &lt;/div&gt;
      &lt;/mat-expansion-panel&gt;
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p>.TS:</p>
  
  <pre><code>//Get data from Sale1List
  getSale1() {        
      this.customersService.getSale1()
      .subscribe(
          dataList =&gt; {                    
                  this.updateDataTable(dataList);
           }               
       )       
   }
  
  
  updateDataTable(dataList) { 
  for(var i = 0;i &lt; dataList.length; i++){
      var saleData = &lt;SaleDataModel&gt;dataList[i];
  
     var mySaleModelTest = this.mySaleModelArray2.find(x =&gt; x.name == dataList[i].name);
     if(mySaleModelTest == null){
         //first time creating the object with the bar name
         var tempArray = Array();
         tempArray.push(saleData);
  
         this.mySaleModelArray2.push(new Sale1Model(dataList[i].name,dataList[i].pluPrice * dataList[i].sold_count,tempArray));
  
     }else{                           
         //changing the object with the bar name because it already exist
         mySaleModelTest.total_sales = mySaleModelTest.total_sales + dataList[i].pluPrice * dataList[i].sold_count;
         mySaleModelTest.sales.push(saleData);
     }                    
     }    
  }
  </code></pre>