我有通知串列，用戶可以選擇通知串列并洗掉。
洗掉程序作業正常，但每次用戶洗掉專案時我都必須重新加載頁面，一旦用戶洗掉元素，我就無法查看更改。
我嘗試過 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/net/495186.html