Question

我正在尝试构建一个输入界面，用户可以在其中单击按钮以在Ionic中添加输入字段。因为输入是通过* ngFor动态生成的，所以我在使用ng-Model绑定它们时遇到了问题。我可以为每个输入提供唯一的ID，但不能获取该字段的值。

请参阅我的HTML：

  <ion-list>
  <ion-item>
    <ion-label>Name</ion-label>
    <ion-input name="name"></ion-input>
  </ion-item>
<ion-item-sliding *ngFor="let attribute of attributes; let i = index;">
  <ion-item>
    <ion-input type="text" placeholder="Attribute {{i + 1}}"></ion-input>
    <ion-select placeholder="Type" interface="popover">
      <ion-option value="0" selected="true">Checkbox</ion-option>
      <ion-option value="1">Text</ion-option>
    </ion-select>
  </ion-item>
  <ion-item-options>
    <button ion-button color="danger" (click)="deleteItem(i)">Delete</button>
  </ion-item-options>
  </ion-item-sliding>
  <button ion-button icon-only style="float: right" (click)="onClickAddAttribute()">
    <ion-icon name="add"></ion-icon>
  </button>
</ion-list>

和我的ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-new-stack',
  templateUrl: 'new-stack.html',
})
export class NewStackPage {
  attributes = [0];
  name = "";
  constructor(public navCtrl: NavController, public navParams: NavParams,
              public storage: Storage, public alertCtrl: AlertController) {
  }

  onClickAddAttribute(){
      this.attributes.push(this.attributes.length);
  }

  deleteItem(i){
    this.attributes.splice(i, 1);
  }
}

我不需要立即输入值，但是点击按钮后

提前谢谢你，原谅我的英文

编辑：

我尝试添加

id="attr[i]"

带

`getAttributes(){ 
    let attrArr = [] 
    for (let i = 0; i < this.attributes.length; i++) { 
      attrArr.push(document.getElementById("attr"+[i])); 
    } 
    console.log(attrArr); 
  }`

和

[(ngModel)]="attr{{i}}" name="attr{{i}}" 与...结合 this.attr[i]，根本不起作用

Answer 1

您可以保持两个array同步。您在*ngFor中迭代的一个，以及存储输入值的一个。对array使用一个*ngFor，然后在[(ngModel)]中使用其元素，每次在输入中输入字符时都会运行*ngFor，这会导致input在输入角色后失去焦点。

<强> HTML：

<ion-content>

    <button ion-button (click)="addInput()">Add Input</button>
    <ion-item *ngFor="let item of attributes; let i = index">
        <ion-label>Input #{{ i + 1 }}</ion-label>
        <ion-input [(ngModel)]="values[i]" (input)="valChange($event.target.value, i)" type="text"></ion-input>
        <button item-right ion-button icon-only (click)="removeInput(i)">
            <ion-icon name="close"></ion-icon>
        </button>
    </ion-item>

    <button ion-button (click)="getValues()">Get values</button>

</ion-content>

<强> TS：

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

@IonicPage()
@Component({
    selector: 'some-page',
    templateUrl: 'some-page.html'
})
export class SomePage {
    attributes:Array<number> = [];
    values:Array<string> = [];

    constructor() { }    

    valChange(value:string, index:number):void{
        this.values[index] = value;
    }

    addInput():void{
        this.attributes.push(this.attributes.length);
        this.values.push('');
    }

    removeInput(index:number):void{
        this.attributes.splice(index, 1);
        this.values.splice(index, 1);
    }

    getValues():void{
        console.log(this.values);
    }
}

获取* ng的输入值在离子2中生成输入

1 个答案: