My view does not update when i change my array in *ngFor

Question

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?

In my ngOnInit() i call

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);
   }                    
   }    
}

Have you set the ChangeDetectionStrategy to OnPush maybe? — user184994
– user184994, Commented Nov 8, 2018 at 7:42
i Changed it from .OnPush till .Default. no change as it seems for me. — Sonny Hansen
– Sonny Hansen, Commented Nov 8, 2018 at 7:43
@JacopoSciampi this.updateDataTable(dataList); this.changeDetectorRef.detectChanges(); this will do the trick. still wondering why. but atleast the view worst so far — Sonny Hansen
– Sonny Hansen, Commented Nov 8, 2018 at 7:51
@SonnyHansen I'll post an asnwer for this. Just let me some minutes. — Jacopo Sciampi
– Jacopo Sciampi, Commented Nov 8, 2018 at 8:12

hansn · Accepted Answer · 2020-05-21 13:58:53Z

11

ChangeDetectorRef will do the trick.

Inject him in the constructor.

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

edit getSale1 like this in order to use the cdr:

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

But why I have to use the ChangeDetectorRef?

Angular, by default, use the ChangeDetectionStrategy.default that use its logic to "wake-up" the component for the render. More spec here: https://angular.io/api/core/ChangeDetectionStrategy

There are certain cases where this isn't enough. One case could be a very big nested *ngFor.

So why use the cdr?

As I said, there are some cases when Angular does not wake up its renderer. Since every situation is not the same, it's quite impossibile to define an absolute answer to this. What cdr.detectChanges() does, is to allow the method to inform the Angular's rendered to force the render of its component.html. In this way, no matter which strategy are you using (even if it's .onPush) the component will be re-rendered.

But be careful. you have to think what you are doing before implementing this. For example, re-render the html fire the ngOnChanges event. So you could enter an endless loop.

More info about cdr: https://angular.io/api/core/ChangeDetectorRef

Hope that this cleared out some doubts.

edited May 21, 2020 at 13:58

hansn

2,0343 gold badges20 silver badges35 bronze badges

answered Nov 8, 2018 at 8:24

Jacopo Sciampi

3,5042 gold badges27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jacopo Sciampi Over a year ago

You are welcome. I struggled too for months understanding this back in the days. I'm really grateful that my answer helped you!

Sonny Hansen Over a year ago

@JacopoSciampi appreciate your time and effort! Thanks for your answer

FabZbi Over a year ago

I know this has nothing to do with the problem and I really just need to let off some air. I've been struggeling for hours on this. For me this is the reason Angular is just so un-intuitive and I much rather use React. Time to change job I guess.... Good answer tho!

Jacopo Sciampi Over a year ago

I have no idea on what your problem is, but a cool trick to always force angular to re-render is to assign a new object to the binded one. A Simple this.myBindedVariable = JSON.parse(JSON.stringify(myVar)); will do the trick!

user4676340 · Accepted Answer · 2018-11-08 08:09:05Z

4

Use a custom trackby function with a unique return statement (for instance, IDs are supposed to be unique, or you can track on the property you change)

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

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

answered Nov 8, 2018 at 8:09

user4676340

2 Comments

Andrew Philips Over a year ago

This should be the accepted answer. It solved my problem immediately and was quite simple.

oiawo Over a year ago

Please note that the trackBy function interface seems to have been updated to: customTB(index, item) Source : angular.io/api/core/TrackByFunction

Amit Chigadani · Accepted Answer · 2018-11-08 08:05:48Z

0

If you are simply pushing object or data into an array, angular wont detect it as changed property (which is bad). Because you did not completely re-assign to it.

What you could do is :

You can manually perform change detection
Reassign entire array mySaleModelArray2 using temp array (not a good solution though).

answered Nov 8, 2018 at 8:05

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Collectives™ on Stack Overflow

My view does not update when i change my array in *ngFor

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related