当我在 *ngFor 中更改我的数组时，我的视图没有更新

Question

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

在我的 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 可以解决问题。

在构造函数中注入他。

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 的渲染。这样，无论你使用的是哪个strategy（即使是.onPush），组件都会被重新渲染。

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

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

希望这能消除一些疑虑。

Answer 2

使用带有唯一返回语句的自定义 trackby 函数（例如，ID 应该是唯一的，或者您可以跟踪您更改的属性）

*ngFor="let data of mySaleModelArray2; trackBy: customTB"

customTB(item, index) {
  return `${item.id}-${index}`;
}

Answer 3

如果您只是将object 或数据推送到数组中，angular 不会将其检测为已更改的属性（这很糟糕）。因为你没有完全重新分配给它。

你可以做的是：

1. 您可以手动执行更改检测
2. 使用临时数组重新分配整个数组 mySaleModelArray2（虽然不是一个好的解决方案）。