如何在离子4中删除无需重新加载或刷新页面的项目？

Question

我有通知列表，用户可以选择通知列表和删除列表。

删除流程正常工作，但是每次用户删除项目时，我都必须重新加载页面，一旦用户删除元素，我就无法查看更改。

我尝试了Angular检测更改，但行之有效。

看起来有些东西可以防止角度的函数上班。

我的.TS页面

   async changeView(){
       if(this.dataselect!=undefined){
           if(this.dataselect!=""){
             const alert = await this.alertCtrl.create({
              message: this.removenoti,
              buttons: [
                {
                  text: "Cancel",
                  role: 'cancel',
                  handler: () => {
                    console.log('Cancel clicked');
                  }
                }, {
                  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.zone.runOutsideAngular(() => { 

                        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);
                        
                        let loading_time = 2000;
                        setTimeout( () => {
                            this.ngOnInit();
                        }, loading_time);
                    //  window.location.assign('/');
                    });

                    }, (err) => {
                        console.log(JSON.stringify(err));
                        this.presentToast("Please connect your device to internet!");
                    });

                  }
                }
              ]
            });
            await alert.present();
        } else {
           this.presentToast(this.noitems);
        }
       } else {
           this.presentToast(this.noitems);
       }
    }

我的HTML代码

<ion-content style="--padding-top:6em">
    <ion-fab *ngIf="exist=='true'" class="header_tab">
        <button ion-fab *ngIf="edit" class="cancelremove" 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" class="list" >
          <ion-row class="textin" *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 class="condate">
                            <ion-col col-7 style="padding-left:0;">
                            <div *ngIf="item.nid!=0">
                                <p class="titlenote">{{ item.ncompany}}</p>
                            </div>
                            <div *ngIf="item.nid==0">
                                <p class="titlenote">Tagy</p>
                            </div>
                            </ion-col>
                            <ion-col col-5>
                                <p class="date">{{ item.ndate| date:'dd/MM/yyyy hh:mm' }}</p>
                            </ion-col>
                        </ion-row>
                        <ion-row>
                            <ion-col col-12>
                                <p class="detailnote">{{ item.nsubject }}</p>
                            </ion-col>
                        </ion-row>
                    </ion-col>
                </ion-label>
          </ion-row>

        </ion-grid>
    </div>

Answer 1

在Angular中，您可以使用可观察的和行为主题。
您可以在.ts文件中创建它们

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

，并将它们与HTML中的异步管一起使用

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

，因为它是异步的，每次使用.next方法推动新值时，它都会自行自行自身。

对不起，我没有时间将我的答案完美地适应您的问题，但是现在您至少知道并可以了解更多。

这是有关该主题的第一个链接：
https://angular.io/guide/guide/observables

Answer 2

我记得当我与Ionic一起为移动项目工作时看到了这种问题。从API获取数据并重新渲染UI之后，我们必须在ngzone中执行代码以进行Angular以调用更改检测。因此，在您的handler中尝试此操作：（）函数：

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

由于我对组件的代码没有完全可见的可见性，上面的代码是我最好的假设，该假设应基于您提供的代码示例在NGZONE内部执行。 。

当然，要使用ngzone，您必须在构造函数中导入并声明：

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

希望这会有所帮助！

Answer 3

您可以尝试使用更改eTectorRef 要求Angular检测任何更改。

例子：

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

constructor(private cdr: ChangeDetectorRef) {}

deleteItem() {
 this.cdr.markForCheck();
 this.cdr.detectChanges();
}