Angular Typescript changing Object property in array not updating view

Question

I'm working on learning Typescript and Angular and I have question as to why my view isn't updating when updating an array value that is set to a object i have defined. I suspect it's something to do with me losing the context to this? Do I need to run ngZone somehow? (I've tried with no success). I suspect this it's something easy or a concept I'm overlooking.

cardItems = {
  addUser: true,
  inventory: false
}
cardCollapseItems = [
{
  label: "addUser",
  item: this.cardItems.addUser
},
{
  label: "inventory",
  item: this.cardItems.inventory
},

collapseCard(value){
 let index = this.cardCollapseItems.findIndex(item => item.label === value)
 let cardItem = this.cardCollapseItems[index]
 cardItem.item ? cardItem.item = false : cardItem.item = true;
}

 <ion-card-header (click)="collapseCard('addUser')">
 <ion-card-content [hidden]="cardItems.addUser" >

Possible duplicate of [Angular 2: How to detect changes in an array? (@input property)](https://stackoverflow.com/questions/42962394/angular-2-how-to-detect-changes-in-an-array-input-property) — Nadhir Falta, Oct 13 '19 at 20:35
Stop learning Angular for a bit and go learn RxJs. Angular is a different style of programming built on RxJs and reactive programming. In modern JavaScript apps we don't modify data structures any more we push new ones created off the old ones. Make sure you have a good understanding of RxJs before even looking at Angular. I wish somebody told me this a few years ago. — Adrian Brand, Oct 13 '19 at 22:11
Thanks for the input. I will dive deeper into RxJs. I use it some already and coming from Knockout I have a decent understanding of observables and subscriptions, but I thought that was overkill for this situation, I guess not! — cempro, Oct 13 '19 at 22:35
it's as expected, value of cardItems is not being changed. so obviously there wont be changes in html. — Anand Bhushan, Oct 14 '19 at 07:15

score 0 · Accepted Answer · answered Oct 13 '19 at 21:05

0

Try this:

One:

@Component({
  selector: 'app-example-page',
  templateUrl: './example.page.html',
  styleUrls: ['./example.page.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

Two:

public cdRef: ChangeDetectorRef;

public constructor(
    cdRef: ChangeDetectorRef,
  ) {
    this.cdRef = cdRef;
  }

collapseCard(value){
 let index = this.cardCollapseItems.findIndex(item => item.label === value)
 let cardItem = this.cardCollapseItems[index]
 cardItem.item ? cardItem.item = false : cardItem.item = true;
 this.cdRef.detectChanges();
}

answered Oct 13 '19 at 21:05

Amir Christian

597
6
20

Thanks for the reply i'll try implementing something like this. Any reason this strategy is worse or better than using RxJs? – cempro Oct 13 '19 at 22:43
If you are going to use ChangeDetectionStrategy.OnPush then you really don't want to be mutating data like arrays. You should be constructing a new array with the changes. Modern JS is a different world than it used to be. – Adrian Brand Oct 14 '19 at 06:17

score 0 · Answer 2 · edited Oct 14 '19 at 02:10

0

If you are trying to displaying cardItems in your view. you have to update it from the collapseCard function. Updating with this.cardItems will solve the issue. You are assigning true or false to value which is only limited to your intialized variable in function.

edited Oct 14 '19 at 02:10

Dale K

25,246
15
42
71

answered Oct 13 '19 at 21:13

Shubham Lalwani

1
1

Yes I originally went this route and it worked, but i wanted to be able to just update my array when I created new items that way the collapseCard function doesn't need updating. – cempro Oct 13 '19 at 22:44

Angular Typescript changing Object property in array not updating view

2 Answers2