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

<强> STOP
是
的 JQUERY
的 WITH 的 ANGULAR

我说不够。 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]; } } }

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

1 个答案: