慕蓋茨4494581
2022-08-04 17:59:08
我有一個角度頁面,它使用來自服務的可觀察參數。但是,當此可觀察更新時,頁面不會更新以匹配。我嘗試過將可觀察的結果存儲在平面值中,或者更改布爾值以調整UI,但似乎沒有效果。記錄可觀察對象可確認它已正確更新,并在重新導航到該頁面時顯示新值。其他條件 UI 更新可以正確修改頁面,只有下面的一個 () 導致此問題。*ngIf="(entries$ | async), else loading"component.tsexport class EncyclopediaHomeComponent implements OnInit { entries$: Observable<EncyclopediaEntry[]>; categories$: Observable<string[]>; entry$: Observable<EncyclopediaEntry>; entry: EncyclopediaEntry; isEditing: boolean; constructor(private route: ActivatedRoute, private encyService: EncyclopediaService) { this.entries$ = encyService.entries$; this.categories$ = encyService.categories$; this.entries$.subscribe(es => { console.log(es); }); route.url.subscribe(url => this.isEditing = url.some(x => x.path == 'edit')); this.entry$ = route.params.pipe( switchMap(pars => pars.id ? encyService.getEntry(pars.id) : of(null)), ); this.entry$.subscribe(entry => this.entry = entry); } ngOnInit(): void { } updateEntry(entry: EncyclopediaEntry) { this.encyService.updateEntry(entry.id, entry); }}組件.html<div class="encyclopedia-container"> <ng-container *ngIf="(entries$ | async), else loading"> <app-enc-list [entries]="entries$ | async" [selectedId]="entry ? entry.id : null"></app-enc-list> <ng-container *ngIf="entry"> <app-enc-info *ngIf="!isEditing, else editTemplate" [entry]="entry$ | async"></app-enc-info> <ng-template #editTemplate> <app-enc-edit [entry]="entry$ | async" [categories]="categories$ | async" (save)="updateEntry($event)"></app-enc-edit> </ng-template> </ng-container> </ng-container> <ng-template #loading> <mat-progress-bar mode="indeterminate"></mat-progress-bar> <br> <p>Loading Encyclopedia...</p> </ng-template></div>
1 回答

絕地無雙
TA貢獻1946條經驗 獲得超4個贊
該組件似乎沒有看到更改。我不知道為什么,因為|異步將完成這項工作。
但要修復它,您可以使用ChangeDetector:
constructor(
private route: ActivatedRoute,
private encyService: EncyclopediaService
private changeDetectorRef: ChangeDetectorRef,
) {
this.entries$ = encyService.entries$;
this.categories$ = encyService.categories$;
this.entries$.subscribe(es => {
// setTimeout need to run without troubles with ng changes detector
setTimeout(_=>{this.changeDetectorRef.detectChanges()},0);
...
});
或者你可以使用markforCheck,就像那里描述的那樣。
添加回答
舉報
0/150
提交
取消