在爱奥尼亚4中，如何在不重新加载或刷新页面的情况下删除项目？

Question

我有通知列表，用户可以选择通知列表并删除。删除过程工作正常，但每次用户删除项目时我都必须重新加载页面，一旦用户删除元素，我就无法查看更改。我试着检测角度变化，但不起作用。

我的ts页

                  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('/');

                    }

我的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"

由于它是异步的，所以每次推送新值时，它都会更新自身。下一种方法。

很抱歉，我没有时间完全调整我的答案来回答你的问题，但现在你至少知道并可以了解更多。

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