我有通知串列,用戶可以選擇通知串列并洗掉。
洗掉程序作業正常,但每次用戶洗掉專案時我都必須重新加載頁面,一旦用戶洗掉元素,我就無法查看更改。
我嘗試過 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>
uj5u.com熱心網友回復:
在 Angular 中,您可以使用 Observables 和 Behavior Subjects。
您可以在 .ts 檔案中像這樣創建它們
activityLoaded$ = new BehaviorSubject(false);
this.activityLoaded$.next(true);
并將它們與 html 中的異步管道一起使用
*ngIf="(activityLoaded$ | async) === false"
由于它是異步的,因此每次使用 .next 方法推送新值時,它都會自行更新。
很抱歉,我沒有時間完美地調整我對您問題的回答,但現在您至少知道并且可以了解更多資訊。
這是關于該主題的第一個鏈接: https ://angular.io/guide/observables
uj5u.com熱心網友回復:
我記得當我與 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
) {}
希望這可以幫助!
uj5u.com熱心網友回復:
您可以嘗試使用ChangeDetectorRef來詢問 Angular 以檢測任何更改。
例子:
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) {}
deleteItem() {
this.cdr.markForCheck();
this.cdr.detectChanges();
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/491934.html
上一篇:基于MybatisPlus代碼生成器(2.0新版本)
下一篇:Mysql索引-B+樹
