可观察订阅触发后未更新的角度 UI

Question

我有一个角度页面，它使用来自服务的可观察参数。但是，当此可观察更新时，页面不会更新以匹配。我尝试过将可观察的结果存储在平面值中，或者更改布尔值以调整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>

Answer 1

该组件似乎没有看到更改。我不知道为什么，因为|异步将完成这项工作。

但要修复它，您可以使用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，就像那里描述的那样。