亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

可觀察訂閱觸發后未更新的角度 UI

可觀察訂閱觸發后未更新的角度 UI

慕蓋茨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,就像那里描述的那樣。


查看完整回答
反對 回復 2022-08-04
  • 1 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號