すべてのデータが角2に集まるまでレンダリングコンポーネントを待機させる方法

Question

編集ページでngModelを使用するには多くのことを試しましたが、エラーが発生します。 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を追加します。このように* ngを使用してください。ヌル以来、nullに初期化する必要はありませんそれもProductEditComponentをインスタンス化する前に、あなたはまた、あなたのための製品データをプリロードするためにルータを使用することができます

<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; 

をゼロにするために、製品を初期化する第二に、私はそれだけがインスタンス化されていない製品オブジェクトに近い関連とることができ、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

「falsy」ではありません。

具体的には、あなたは、例えば、ルート宣言でResolveガードを使用する必要があります。：

ProductResolverにid productIdで製品をロードするカスタムサービスである

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

。

決意を実装する方法、ルートを宣言するために、どのようにコンポーネント内のプリフェッチされたデータを取得する方法を示す完全な例が含まれている、公式ドキュメントをチェックアウト：https://angular.io/docs/ts/latest/guide/router.html#resolve-guard