как ждать компонента рендеринга до тех пор, пока все данные не будут собраны в Angular 2

Question

Я пробовал много вещей, чтобы заставить ngModel работать на моей странице редактирования, но это дает мне ошибку. Ошибка occures beacause ngModel пытается получить данные перед их загрузкой. См. Мой код ниже.

ProductEditComponent

import 'rxjs/add/operator/switchMap'; 
import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Params, Router } from '@angular/router'; 
import { Location } from '@angular/common'; 

import { Product } from './../shared/product.model'; 
import { ProductService } from './../shared/product.service'; 

@Component({ 
    selector: 'product-edit', 
    template: require('./product-edit.component.html'), 
    providers: [ProductService] 
}) 

export class ProductEditComponent implements OnInit { 
    product: Product; 
    name2: boolean = false; 

    constructor(
     private productService: ProductService, 
     private route: ActivatedRoute, 
     private location: Location, 
     private router: Router 
    ) { } 

    ngOnInit(): void { 
     var test = this.route.params 
      .switchMap((params: Params) => this.productService.getProduct(+params['id'])) 
      .subscribe(product => this.product = product).closed; 
      console.log(test); 
     if (test['closed']) { 
      this.name2 = true; 
     } 
    } 

    goBack(): void { 
     this.location.back(); 
    } 

    onSave(): void { 
     this.router.navigate(['product-edit', this.product]); 
    } 
} 

ProducEdit HTML

<div class="product-edit"> 
    <h2>Edit: {{product?.name}}</h2> 
    <div class="form-group row" *ngIf="name2"> 
     <label for="name" class="col-2 col-form-label">Name</label> 
     <div class="col-10"> 
      <input class="form-control" id="name" [(ngModel)]="name2" placeholder="" /> 
     </div> 
    </div> 
</div> 

Как я могу ждать, пока данные загружаются и чем делают свой компонент?

Answer 1

Я могу только предположить, что это связано с объектом продукта не реализованным. Используйте * ngIf вот так. Нет необходимости инициализировать в нуль, так как нуль является «falsy»

<div class="product-edit" *ngIf="product"> 
<h2>Edit: {{product?.name}}</h2> 
<div class="form-group row" *ngIf="name2"> 
    <label for="name" class="col-2 col-form-label">Name</label> 
    <div class="col-10"> 
     <input class="form-control" id="name" [(ngModel)]="name2" placeholder="" /> 
    </div> 
</div> 

Answer 2

Сначала инициализировать продукт обнулить

product: Product = null; 

Второй добавить * ngIf в HTML

<div class="product-edit" *ngIf="product != null"> 
    <h2>Edit: {{product.name}}</h2> 
    <div class="form-group row" *ngIf="name2"> 
     <label for="name" class="col-2 col-form-label">Name</label> 
     <div class="col-10"> 
      <input class="form-control" id="name" [(ngModel)]="name2" placeholder="" /> 
     </div> 
    </div> 
</div> 

Answer 3

Вы также можете использовать маршрутизатор для предварительной загрузки данных продукта для вас, прежде чем он даже инстанцирует ProductEditComponent.

Более конкретно, вы должны использовать Resolve охранник в объявлении маршрута, например .:

{ 
    path: 'product/:productId', 
    component: ProductEditComponent, 
    resolve: { product: ProductResolver } 
} 

где ProductResolver является пользовательский сервис, который будет загружать продукт с идентификатором productId.

Проверьте официальный документ, который содержит полный пример, показывающий, как объявить маршрут, как реализовать решение, и как получить упреждающую информацию внутри компонента: https://angular.io/docs/ts/latest/guide/router.html#resolve-guard