How to delete items without reload or refresh page in ionic 4?-CodePudding

I have list of notification, user can select list of notification and delete. Delete process working fine but I have to reload page every time user delete item, I couldn't view the changes once user delete elements. I have trying Angular detect changes but it doesn't work.

My .ts page

                  text: "Remove",
                  handler: () => {
                    const SigninData = JSON.parse(localStorage.getItem("signindata"));
                    this.userData.id = SigninData.mem_id;
                    this.userData.token  = SigninData.token;
                    this.userData.noti_id = this.dataselect;
                    console.log(this.userData.noti_id);

                    this.providersservices.postData(this.userData, "deletenoti2").subscribe((result) =>{

                        this.presentToast(this.removesuccess);
                        this.dataselect="";
                        this.edit=false;
                        this.SelAll = false;
                        for(var i in this.items)
                        {
                            this.checkItems[this.items[i].id]=false;
                        }
                        console.log(result);
                        
                        let loading_time = 2000;
                        setTimeout( () => {
                            this.ngOnInit();
                        }, loading_time);
                    //  window.location.assign('/');

                    }

My html code

<ion-content style="--padding-top:6em">
    <ion-fab *ngIf="exist=='true'" >
        <button ion-fab *ngIf="edit"  style="right: 45px;" (click)="changeView()">
            <ion-icon name="trash-outline"></ion-icon>
        </button>
     </ion-fab>

    <div *ngIf="exist=='true'">

        <ion-grid *ngFor="let item of items"  >
          <ion-row  *ngIf="item.nstatus!=1" [style.background-color]="hexColor2">

                <ion-checkbox *ngIf="edit" [checked]="allSelected" [(ngModel)]="checkItems[item.id]" (ionChange)="DeSelect();DeSelectall(item.id)"></ion-checkbox>

                <ion-label style="width: 100%;max-height: 4em;">
                    <ion-col col-12 (click)="view(item.id, item.nsubject, item.ndetail, item.ncompany, item.nphoto)">
                        <ion-row >
                            <ion-col col-7 style="padding-left:0;">
                            <div *ngIf="item.nid!=0">
                                <p >{{ item.ncompany}}</p>
                            </div>
                            <div *ngIf="item.nid==0">
                                <p >Tagy</p>
                            </div>
                            </ion-col>
                            <ion-col col-5>
                                <p >{{ item.ndate| date:'dd/MM/yyyy hh:mm' }}</p>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col col-12>
                                <p >{{ item.nsubject }}</p>
                            </ion-col>
                        </ion-row>
                    </ion-col>
                </ion-label>
          </ion-row>

        </ion-grid>
    </div>

CodePudding user response：

In angular, you can use Observables and Behavior Subjects.
You can create them like this in the .ts file

activityLoaded$ = new BehaviorSubject(false);
this.activityLoaded$.next(true);

and use them with the async pipe in the html

*ngIf="(activityLoaded$ | async) === false"

As it is async, it will update itself everytime a new value will be pushed with .next method.

I'm sorry I don't have the time to perfectly adapt my answer to your question but now you at least know and can learn more about it.

Here is a 1st link on the subject: https://angular.io/guide/observables

CodePudding user response：

I remember seeing this kind of issue when I worked with Ionic for my mobile project. After fetching data from an API, to re-render the UI, we had to execute the code within NgZone for angular to call change detection. So try this inside your handler: () function:

this.providersservices.postData(this.userData, "deletenoti2").subscribe((result) => {

   this.presentToast(this.removesuccess);
   
   // executing inside NgZone 
   this.zone.run(() => {
     this.dataselect="";
     this.edit=false;
     this.SelAll = false;

     for(var i in this.items) {
        this.checkItems[this.items[i].id]=false;
     }
   });
   
   console.log(result);
}

As I do not have full visibility of your component's code, above code is my best assumption what should execute inside NgZone, based on the code sample you have provided.

Of course, to use NgZone, you have to import it and declare in the constructor:

constructor(
  ...
  ...
  private zone: NgZone
) {}

Hope this helps!