Angular 模板在动态数据之前呈现

Question

我遇到了一个非常烦人的问题——页面在我获取数据之前呈现。在 $(document).ready() 中，名称已正确记录，并且控制台中没有错误。但是显示的html是空的，刷新页面后显示正确的数据。

这是我的 component.ts 文件：

import {Component} from '@angular/core';
import {DataService} from '../../services/data.service';
import {ActivatedRoute, Router} from '@angular/router';
import * as $ from 'jquery/dist/jquery.min.js';
import 'jquery-ui/jquery-ui.min.js';

declare let jQuery: any;

@Component({
  selector: 'user-header',
  templateUrl: '../../templates/plan/header.html',
})
export class HeaderComponent {

  data;
  selectedCompany;
  selectedPlace;

  constructor(private dataService: DataService,
              private router: Router,
              private route: ActivatedRoute) {
    this.data = this.route.parent.snapshot.data;
    this.selectedCompany = this.data.companies[0];
    if (!this.dataService.selectedPlace.getValue()) {
      this.dataService.selectedPlace = this.selectedCompany.foodHandlingPlaces[0];
    }
    this.selectedPlace = this.selectedCompany.foodHandlingPlaces.filter(
        x => x.id === this.dataService.selectedPlace.getValue().id
    )[0];
    if (!this.selectedPlace) {
      this.selectedPlace = this.selectedCompany.foodHandlingPlaces[0];
    }

    const self = this;
    $(document).ready(function () {
      console.log('selectedCompany', self.selectedCompany.name);
      console.log('selectedPlace', self.selectedPlace.name);
    });
  }

这是我的模板 (html) 文件的一部分：

<li class="dropdown">
  <select [(ngModel)]="selectedCompany" (change)="selectCompany()" id="company-select">
    <option *ngFor="let company of data.companies" [ngValue]="company">
      {{ company?.name }}
    </option>
  </select>
</li>
<li class="dropdown">
  <select [(ngModel)]="selectedPlace" (change)="selectPlace()" id="place-select">
    <option *ngFor="let place of selectedCompany.foodHandlingPlaces" [ngValue]="place">
      {{ place?.name }}
    </option>
  </select>
</li>

如何让html等待数据再渲染？

提前致谢！

Answer 1

停止
使用
JQUERY
使用 角度

我说的还不够。 JQuery 是为操作 DOM 而设计的，你不应该在 Angular 中这样做。

如果您想等待数据加载，请在 HTML 模板中使用条件。

<li class="dropdown" *ngIf="selectedCompany && data.companies">
  <select [(ngModel)]="selectedCompany" (change)="selectCompany()" id="company-select">
    <option *ngFor="let company of data?.companies" [ngValue]="company">
      {{ company?.name }}
    </option>
  </select>
</li>
<li class="dropdown" *ngIf="selectedPlace && selectedCompany?.foodHandlingPlaces">
  <select [(ngModel)]="selectedPlace" (change)="selectPlace()" id="place-select">
    <option *ngFor="let place of selectedCompany.foodHandlingPlaces" [ngValue]="place">
      {{ place?.name }}
    </option>
  </select>
</li>

在你的组件中

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'user-header',
  templateUrl: '../../templates/plan/header.html',
})
export class HeaderComponent implements OnInit {

  data;
  selectedCompany;
  selectedPlace;

  constructor(
    private dataService: DataService,
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.data = this.route.parent.snapshot.data;
    this.selectedCompany = this.data.companies[0];
    if (!this.dataService.selectedPlace.getValue()) {
      this.dataService.selectedPlace = this.selectedCompany.foodHandlingPlaces[0];
    }
    this.selectedPlace = this.selectedCompany.foodHandlingPlaces.filter(
      x => x.id === this.dataService.selectedPlace.getValue().id
    )[0];
    if (!this.selectedPlace) {
      this.selectedPlace = this.selectedCompany.foodHandlingPlaces[0];
    }
  }
}