Question

我的应用程序显示在来自API服务器的表单数据中。问题是数据不能立即显示仅当我单击输入表单并在输入外部时才会显示数据。

我-form.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { MyService } from '../../../services/my.service';

@Component({
    selector: 'my-form',
    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: 'public/html/my-form.component.html', 
}) 
export class MyFormComponent implements OnInit {
    active = true;
    submitted = false;
    model = {};

    constructor(private myService: MyService) { }

    ngOnInit() {
         this.myService.getConfig().then(config => { 
            this.model = config;
        }).catch(error => console.log(error));    
    } 
}

我-form.component.html

<form *ngIf="active" (ngSubmit)="onSubmit()" #myForm="ngForm">    
    <input type="number" min="1" class="form-control" required 
        [(ngModel)]="model.config1" name="config1" #config1="ngModel">               
    <button type="submit" class="btn btn-default">Submit</button>
</form>

my.service

import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { BaseUrl } from '../utils/const'

@Injectable() export class MyService {
  constructor(private http: Http) { }

  getNotificationConfig(): Promise<any> {
    return this.http.get(BaseUrl + `my/getConfig`)
      .toPromise()
      .then(this.extractData);   
   }

   private extractData(res: Response): any {
      let body = res.json();
      return body || {};   
   } 
}

Angular 2：具有异步数据的表单

0 个答案: