List not updating in angular

Question

I am new for angular and i have one basic level problem which is list is not getting to updated when i add to new object to my array.

I have one button when i tapped on this i am adding new object to array-list but list is not updating and more-ever i am group-by my array-list by date,Is this is problem can some one help me please.

.ts:

export class HomePage {

  events: any;

ionViewDidLoad() {

    this.events = [
      {
        "id": 1,
        "date": "2017-12-26",
        "title": "First event"
      },
      {
        "id": 2,
        "date": "2017-12-30",
        "title": "Second event"
      },
      {
        "id": 3,
        "date": "2017-12-26",
        "title": "Third event"
      },
      {
        "id": 4,
        "date": "2017-12-31",
        "title": "Last event"
      }
    ];

  }

  add(){

     this.events.push({
      "id": 5,
      "date": "2017-12-26",
       "title": "Test event"
     });
  }
}

.html:

 <ion-content padding>

        <div *ngIf="!events || events.length === 0">
            <p>No messages</p>
        </div>

      <div *ngIf="events && events?.length > 0 ">
        <ion-item-group *ngFor="let group of events | groupByCategory: 'date'">
          <ion-item-divider color="light">
            {{ group.key }}
          </ion-item-divider>
          <ion-item *ngFor="let event of group.list">{{ event.title }}</ion-item>
        </ion-item-group>
      </div>

      <div class="bottomright" (click)="add()">Add</div>

    </ion-content>

Custom Pipe:

@Pipe({ name: 'groupByCategory' })
export class GroupbycategoryProvider implements PipeTransform {

  transform(value: any, groupByKey: string) {

    const events: any[] = [];
    const groupedElements: any = {};

    value.forEach((obj: any) => {
      if (!(obj[groupByKey] in groupedElements)) {
        groupedElements[obj[groupByKey]] = [];
      }
      groupedElements[obj[groupByKey]].push(obj);
    });

    for (let prop in groupedElements) {
      if (groupedElements.hasOwnProperty(prop)) {
        events.push({
          key: prop,
          list: groupedElements[prop]
        });
      }
    }
    return events;
  }
}

Can you add a stackblitz for this? And add the `groupByCategory` pipe code to the question — Anuradha Gunasekara, Jul 11 '18 at 08:53
no error,object adding to my array that's fine but list is not getting updated — AbhiRam, Jul 11 '18 at 09:02

score 0 · Answer 1 · answered Jul 11 '18 at 09:18

0

I couldn't understand the question currently but try this :

 add(){

     this.events.push({
      "id": 5,
      "date": "2017-12-26",
       "title": "Test event"
     });
     this.cr.detectChanges();
  }

Also, add this to your constructor like :

constructor(private cr: ChangeDetectorRef ){}

Then import it.

answered Jul 11 '18 at 09:18

M Fuat

1,330
3
12
24

i mean object adding to my array that's fine but list not showing newly adding objects – AbhiRam Jul 11 '18 at 09:22
let me try tell result – AbhiRam Jul 11 '18 at 09:25

score 0 · Answer 2 · answered Jul 11 '18 at 09:25

0

Passing values to child component and generating happens only on init. So to forcefully check and detect changes, use ChangeDetector

import { Component, ChangeDetectorRef } from '@angular/core';



export class HomePage {

  events: any;

ionViewDidLoad() {

    this.events = [
      {
        "id": 1,
        "date": "2017-12-26",
        "title": "First event"
      },
      {
        "id": 2,
        "date": "2017-12-30",
        "title": "Second event"
      },
      {
        "id": 3,
        "date": "2017-12-26",
        "title": "Third event"
      },
      {
        "id": 4,
        "date": "2017-12-31",
        "title": "Last event"
      }
    ];

  }

  constructor(private cd: ChangeDetectorRef) {}

  add(){

     this.events.push({
      "id": 5,
      "date": "2017-12-26",
       "title": "Test event"
     });
     this.cd.detectChanges()
  }




}

answered Jul 11 '18 at 09:25

Debojyoti

4,503
3
19
27

Try removing `| groupByCategory: 'date'` from ` ` and check result – Debojyoti Jul 11 '18 at 09:36
yes if i remove its working fine but its recommended to filter list by date – AbhiRam Jul 11 '18 at 09:39
You have to create a stateful pipe Check https://stackoverflow.com/questions/34456430/ngfor-doesnt-update-data-with-pipe-in-angular2 – Debojyoti Jul 11 '18 at 09:49
can you please help to create such type of pipe – AbhiRam Jul 11 '18 at 09:58

List not updating in angular

.ts:

.html:

Custom Pipe:

2 Answers2