Question

选择select选项以对新数据源进行API调用后-我的表呈现出现在获取数据之前，并且他为空。如果我选择另一个select选项，它将为我显示先前选项的先前数据

试图放置触发器，等待，承诺

ngOnInit() {
    getAllRoutes();
    this.currentRouteControl.valueChanges
      .pipe(takeUntil(this._unsubscribe))
      .subscribe((val: Route) => {
         this.commonCatalogueService.getRouteScheduleByRouteId(val.id)
            .subscribe((data:any) => this.dataSource = data)});
    }

我希望仅在获取数据后才渲染表。 UPD：选择列表项将在ngOnInit中获取，然后添加到数组中。该数组将通过ngFor添加到选择选项

<select class="m-r-20" [formControl]="currentRouteControl">
          <option *ngFor="let route of (routes$ | async)" [ngValue]="route.route">{{
            route.route.number
            }}</option>
        </select>

private routesSubject: BehaviorSubject<RouteWrapper[]> = new BehaviorSubject(null);
routes$ = this.routesSubject.asObservable();

getAllRoutes() {
    this.isLoadingResults = true;
    this.commonCatalogueService
      .getRouteWrappers()
      .pipe(takeUntil(this._unsubscribe))
      .subscribe(val => {
        this.routesSubject.next(val);
        this.isLoadingResults = false;
      });
  }

Answer 1

您可以控制何时使用Angular的NgIf渲染模板，该模板仅在其表达式的值为真时才包含模板。

<table *ngIf="dataSource"></table>

现在，仅当dataSource被定义/具有一个值时，才会渲染上表，因为undefined是Javascript中的虚假值。

Answer 2

我导入了{{ json . }}，以在获取数据后立即更新显示的信息，并在分配订阅数据后将其添加。

ChangeDetectorRef

强制重新渲染/刷新表

2 个答案: