Question

我在FormGroup中有一个带有离子输入的页面。当他们转到页面时，数据从服务器加载。当数据进入时，我希望用服务器中的数据填充离子输入，然后用户可以编辑和保存数据。我无法通过离子输入来显示数据。（它仍然是空白的）

以下是页面：

    import { Component,ViewChild } from '@angular/core';
    import { Validators, FormBuilder, FormGroup } from "@angular/forms";
    import { NavController, App, MenuController, NavParams, AlertController,Content   } from 'ionic-angular';
    import {DomSanitizer,SafeResourceUrl} from '@angular/platform-browser';
    import { TabsPage } from '../tabs/tabs';

    // Providers
      import { ProjectDetailService } from '../../providers/project-detail-service';

    @Component({
        selector: 'page-form',
        templateUrl: 'form.html',
    })
    export class FormPage {

    @ViewChild(Content) content: Content;

    newObject: FormGroup;
    object: any = {};
    objectKey: string = "";
    pageTitle: string = "Create New";
    videoURL: SafeResourceUrl;
    sanitizer: DomSanitizer;
    updating: boolean = false;

    constructor( public formBuilder: FormBuilder,
                    public service: ProjectDetailService,
                    public navParams: NavParams,
                    public app: App,
              public alertCtrl: AlertController,
              sanitizer: DomSanitizer ) {

                  this.sanitizer = sanitizer;

                  this.newObject = this.formBuilder.group({
                      name: this.object.name
                  });

    }

    setData()
    {
        this.newObject.value.name = this.object.name;


        //none of these work:
//this.content.resize();
        //window.location.reload();
          //this.app.getRootNav().setRoot(this.app.getRootNav().getActive().component);
    }

    ionViewDidLoad()
    {
        this.objectKey = this.navParams.get('projectKey');
        console.log("objectkey="+this.objectKey)

            this.service.getProject(this.objectKey).subscribe( ( data: any ) => {
                this.object = data;

                this.setData();
            })


    }

这是html：

<ion-content padding>
   <form [formGroup]="newObject" (ngSubmit)="save()">

      <ion-item>
        <ion-label>Project Name</ion-label>
        <ion-input type="text" formControlName="name"></ion-input>
      </ion-item>
 </form>


</ion-content>

Answer 1

我认为FormBuilder不是双向绑定器而是使用像这样的简单双向绑定

<ion-input type="text" [(ngModel)]="name" formControlName="name"></ion-input>

并以

进行访问

this.name = 'something';

离子2获取离子输入文本以刷新

1 个答案: