angular - 当我更改 *ngFor 中的数组时，我的 View 不会更新

Question

我正在尝试创建一些内部有 mat-table 的扩展面板，我的问题是我必须在 View 改变之前调整窗口大小。我的数据加载正常，但不知何故我的 View 没有更新。我的扩展面板应该在的位置完全是空白的。直到我单击按钮或调整窗口大小。什么会导致这样的事情？

在我的 ngOnInit() 中我调用

this.getSale1(); 

.HTML:

<mat-accordion>
    <mat-expansion-panel *ngFor="let data of mySaleModelArray2 ">
        <mat-expansion-panel-header>
            <mat-panel-title>
                <h6 class="salepanelheadtext">Bar:</h6>{{data.name}}
            </mat-panel-title>
        <mat-panel-description>
            <h6 class="salepanelheadtext2">Total:</h6> {{data.total_sales}}
        </mat-panel-description>
        </mat-expansion-panel-header>
            <div class="example-container mat-elevation-z8">                                
                <mat-table #table [dataSource]="data.sales"  >
                <!-- PLU Column -->                                 
                <ng-container matColumnDef="pluNo">
                    <mat-header-cell *matHeaderCellDef >
                        #
                    </mat-header-cell>
                    <mat-cell *matCellDef="let salesdata"> 
                        {{salesdata.beerline}} 
                    </mat-cell>
                </ng-container>
                <!-- Name Column -->
                <ng-container matColumnDef="name">
                    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
                    <mat-cell *matCellDef="let salesdata"> 
                         {{salesdata.pluName}} 
                    </mat-cell>
                </ng-container>
                <!-- Sold_Count Column -->
                <ng-container matColumnDef="sold_count">
                    <mat-header-cell *matHeaderCellDef> 
                        QTY 
                    </mat-header-cell>
                    <mat-cell *matCellDef="let salesdata"> 
                        {{salesdata.sold_count}} 
                    </mat-cell>
                </ng-container>
                <!-- PLU Price Column -->
                <ng-container matColumnDef="pluPrice">
                    <mat-header-cell *matHeaderCellDef> Price </mat-header-cell>
                    <mat-cell *matCellDef="let salesdata"> 
                        {{salesdata.pluPrice}} 
                    </mat-cell>
                </ng-container>
                <!---->
                <ng-container matColumnDef="total_amount">
                    <mat-header-cell *matHeaderCellDef> 
                        Total 
                    </mat-header-cell>
                    <mat-cell *matCellDef="let salesdata"> 
                        {{salesdata.pluPrice * salesdata.sold_count}} 
                    </mat-cell>
                </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns2"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns2;"></mat-row>
            </mat-table>
        </div>
    </mat-expansion-panel>
</mat-accordion>

.TS:

//Get data from Sale1List
getSale1() {        
    this.customersService.getSale1()
    .subscribe(
        dataList => {                    
                this.updateDataTable(dataList);
         }               
     )       
 }


updateDataTable(dataList) { 
for(var i = 0;i < dataList.length; i++){
    var saleData = <SaleDataModel>dataList[i];

   var mySaleModelTest = this.mySaleModelArray2.find(x => 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);
   }                    
   }    
}

Answer 1

ChangeDetectorRef 就可以了。

将他注入(inject)到构造函数中。

constructor(
  ... 
  private cdr: ChangeDetectorRef,
  ...
) { }

像这样编辑getSale1以使用cdr:

getSale1() {        
    this.customersService.getSale1()
    .subscribe(
        dataList => {                    
                this.updateDataTable(dataList);
                this.cdr.detectChanges();
         }               
     )       
 }

但是为什么我必须使用 ChangeDetectorRef？

Angular 默认情况下使用 ChangeDetectionStrategy.default，它使用其逻辑“唤醒”组件进行渲染。更多规范请点击:https://angular.io/api/core/ChangeDetectionStrategy

在某些情况下这还不够。一种情况可能是非常大的嵌套 *ngFor。

那么为什么要使用 cdr？

正如我所说，在某些情况下 Angular 不会唤醒其渲染器。由于每种情况都不一样，因此不可能对此给出绝对的答案。 cdr.detectChanges() 的作用是允许该方法通知 Angular 的渲染以强制渲染其 component.html。这样，无论您使用哪种策略(即使是.onPush)，组件都会重新渲染。

但是要小心。在执行此操作之前，您必须考虑自己在做什么。例如，重新渲染 html 会触发 ngOnChanges 事件。所以你可能会进入无限循环。

有关 cdr 的更多信息:https://angular.io/api/core/ChangeDetectorRef

希望这能消除一些疑虑。