Ionic 如何在离子4中删除项目而不重新加载或刷新页面？

ktca8awb 于 2022-12-09 发布在 Ionic

关注(0)|答案(3)|浏览(189)

我有通知列表，用户可以选择通知列表并删除。
删除过程工作正常，但每次用户删除项目时，我都必须重新加载页面，用户删除元素后，我无法查看更改。
我已经尝试Angular 检测变化，但它不工作。
看起来有什么东西阻止了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>

ionic-framework

来源：https://stackoverflow.com/questions/72619364/how-to-delete-items-without-reload-or-refresh-page-in-ionic-4

3条答案

按热度按时间

yqlxgs2m1#

在Angular 中，您可以使用可观察对象和行为主体。
您可以在.ts文件中创建它们，如下所示

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

并将它们与html中的异步管道一起使用

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

因为它是异步的，所以每次用.next方法推送新值时，它都会更新自己。
很抱歉，我没有时间来完美地调整我的回答，但现在你至少知道，可以了解更多。
这是关于这个主题的第一个链接：https://angular.io/guide/observables

赞(0）回复(0）举报 2022-12-09

ctrmrzij2#

我记得在我的移动的项目中使用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
) {}

希望这对你有帮助！

赞(0）回复(0）举报 2022-12-09

uidvcgyl3#

您可以尝试使用ChangeDetectorRef要求angular检测任何更改。
例如：

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

constructor(private cdr: ChangeDetectorRef) {}

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

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic 如何在离子4中删除项目而不重新加载或刷新页面？

3条答案

相关问题

热门标签

最新问答