Question

我正尝试使用* NgIf来显示我的观察对象中的信息，并且我使用Else来显示正在发出请求的加载组件，但是当请求完成时，它不会更改异步并且加载保持除非触发DOM更新的事情发生（例如，按F12或将鼠标悬停在工具提示上），否则将永远保持下去

我的组件中有

export class ReportComponent implements AfterViewInit, OnInit {
    public serviceModel$:Observable<Report>;
    constructor(
        public service: ReportService,
        private activatedRoute: ActivatedRoute,
        private translationService: TranslationService,
        private translate: TranslateService) { }

    ngOnInit() {
        this.id = this.activatedRoute.snapshot.queryParamMap.get('id'); 
        this.translationService.getSelectedLanguage().subscribe(lang => {
           if (lang) {
              setTimeout(() => 
                this.translationService.setLanguage(lang));
           }
       });
    }

    ngAfterViewInit(): void {
        this.service.getReport(this.id).subscribe(data => {
        this.serviceModel$ = this.service.Model$;
        this.loading = false;
    });
}

而且我的html中有

<div class="col-xl-8">
    <m-report-info *ngIf="(serviceModel$ | async) as model; else 
        loading" #reportInfo [themeItems]="model.themeItems" 
        (updateChartEvent)='updateChart($event)'
        (selectedMenu)="selectedMenuChanged($event)" 
        (selectedSubMenu)="selectedSubMenuChanged($event)"></m- 
    report-info>
</div>
<ng-template #loading>
  <m-portlet>
     <ng-container mPortletBody>
       <m-loading-screen></m-loading-screen>
     </ng-container>
  </m-portlet>
</ng-template>

编辑：
这是我的ReportService的代码：

@Injectable({ providedIn: 'root' })
    export class ReportService extends GenericHttpClientService<Report> {
    protected endpoint: string = '/analysis/report';

    public initializeService(model_: Report) {
        this.Model = model_;
    }

    public getReport(id_: string): Observable<Report> {
        return this.getByID(id_);
    }

}

Answer 1

我不确定Stream是否可以观察到。您已经订阅了一项服务。您是否正在使用嵌套的可观察物？

如果您使用的是错误的方向。

如果您的服务具有嵌套的可观察对象，请使用serviceModel$或类似方法。

* Ng，如果在Observable的请求完成时未更新dom异步

1 个答案: