Question

我正在根据对象数组创建动态表单。如果form标签内的迭代未绑定值，则无法绑定来自迭代的form和ngModel的值。对象数组是键对值。其实我想用键来绑定ngModel并以表格形式显示键标签和键值

我的HTML代码

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

<form (ngSubmit)="logForm()">

<div *ngFor="let item of mainObject; let i = index ; trackBy:trackByIndex;">

        <ion-item *ngFor="let key of keys(item)">
            <ion-label floating>{{key}}</ion-label>
              <ion-input  type="text" [(ngModel)]=mainObject[i].key  name={{key}}  value={{item[key]}}></ion-input> 
        </ion-item>
</div>

 </form>

</ion-content>

我的TS

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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


trackByIndex(index: number, obj: any): any {
    return index;
  }


mainObject:any

  constructor(public navCtrl: NavController) {

  this.mainObject  = [{ username: 'Edward', password:'edward123'}]
    console.log(this.mainObject);
  }

keys(obj){
    return Object.keys(obj);
}

STACKBLIZ上的代码和TS

Stackbliz code

使用迭代从具有绑定NgModel的对象数组创建动态表单

0 个答案: