Angular: How to refresh the view after data modification of list?

Question

I have a view with the following snippet:

<div *ngIf="step" [sortablejs]="orderedId" [sortablejsOptions]="optionsSortable">
  <div *ngFor="let item of step.items" class="item">
    <div class="position">{{item.position}}</div>
    <div class="text">{{item.text}}</div>
  </div>
</div>

In controller, I have the following snippet:

export class AppComponent implements AfterViewInit {
  step: StepInterface;
  stepId: number;
  orderedId: Array<number>;

  constructor(private api: ApiService) {

    this.stepId = 1 //Debug

    this.optionsSortable = {
      onUpdate: (event: any) => {
        this.api.organize(this.stepId, this.orderedId).subscribe((response) => {
          this.step = response;
          this.buildArray();
        });
      }
    };
  }

  ngAfterViewInit() {
    this.api.get(this.stepId).subscribe((data) => {
      this.step = data;

      this.buildArray();
    });
  }

  private buildArray() {
    this.orderedId = [];
    for (const item of this.step.items) {
      this.orderedId.push(item.id);
      console.log(clue.id);
    }
  }
}

In fact, I have sortable div and when user modify the position, data is updated with backend. Problem is when the position is updated, so object "step" modified, {{item.position}} is not refreshed in view. How can I update the position in view after position modification?

Thank you

Chellappan வ · Accepted Answer · 2018-07-17 12:32:45Z

3

ChangeDetectorRef

if there is a case where any thing inside your component data has changed but it hasn't reflected the view, you might need to notify Angular to detect those changes ( detect local changes) and update the view.

import { Component, Input, ChangeDetectionStrategy,ChangeDetectorRef } from 
   '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit {
  step: StepInterface;
  stepId: number;
  orderedId: Array<number>;

  constructor(private api: ApiService,private cdr:ChangeDetectorRef) {

    this.stepId = 1 //Debug

    this.optionsSortable = {
      onUpdate: (event: any) => {
        this.api.organize(this.stepId, this.orderedId).subscribe((response) => {
          this.step = response;
          this.buildArray();
        });
      }
    };
  }

  ngAfterViewInit() {
    this.api.get(this.stepId).subscribe((data) => {
      this.step = data;

      this.buildArray();
    });
  }

  private buildArray() {
    this.orderedId = [];
    for (const item of this.step.items) {
      this.orderedId.push(item.id);
      console.log(clue.id);
    }
     this.cd.detectChanges();
  }
}

answered Jul 17, 2018 at 12:32

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

2 Comments

Markus Over a year ago

the only change is: this.cd.detectChanges(); but I'm not sure what cd is.

Markus Over a year ago

I guess cd should be a member that takes on the value of the cdr param passed to the ctor.

Collectives™ on Stack Overflow

Angular: How to refresh the view after data modification of list?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related