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

Question

我有一个角度页面，它使用来自服务的可观察参数。但是，当此可观察更新时，页面不会更新以匹配。

我尝试过将可观察的结果存储在平面值中，或者更改布尔值以调整UI，但似乎没有效果。

记录可观察对象可确认它已正确更新，并在重新导航到该页面时显示新值。

其他条件 UI 更新可以正确修改页面，只有下面的一个 （） 导致此问题。*ngIf="(entries$ | async), else loading"

component.ts

export 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(&nbsp; &nbsp;private route: ActivatedRoute,&nbsp;&nbsp;&nbsp; &nbsp;private encyService: EncyclopediaService&nbsp; &nbsp;private changeDetectorRef: ChangeDetectorRef,) {&nbsp; &nbsp; this.entries$ = encyService.entries$;&nbsp; &nbsp; this.categories$ = encyService.categories$;&nbsp; &nbsp; this.entries$.subscribe(es => {&nbsp; &nbsp; &nbsp; // setTimeout need to run without troubles with ng changes detector&nbsp; &nbsp; &nbsp; setTimeout(_=>{this.changeDetectorRef.detectChanges()},0);&nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; });或者你可以使用markforCheck，就像那里描述的那样。