如何使用ionic动态创建具有ngModel属性的元素？

Question

我正在尝试在用户单击“+”时动态创建 ion-input 元素。然后我想将输入的所有值插入到一个数组中。我创建了输入，但我无法将 [(ngModel)] 属性分配给新元素。我怎样才能做到这一点？这是创建新元素的方法：

newElement() {
    const item = document.createElement('ion-item');
    const input = document.createElement('ion-input');
    input.placeholder = 'شماره سریال';
    input.type = 'text';
    input.required = true;
    input.name = 'serialNumbers';
    input.className = 'input inputSerial';
    input.ngModel='serialNumbers';
    const div = document.getElementById('newElements');
    console.log(item);
    item.appendChild(input);
    div.appendChild(item);
  }

这是第一次加载页面时的默认输入：

  <ion-item>
  <ion-input
    type="text"
    expand="block"
    placeholder="شماره سریال"
    required
    name="serialNumbers"
    [(ngModel)]="serialNumbers"
  ></ion-input>

serialNumbers数组只接受默认输入的值

Answer 1

您需要为此使用 angular 模板。不建议使用 angular 直接操作 DOM。请改用结构指令。

在您的组件 class 中，有一个输入数组

serialNumbers: any = [];

在组件中，

<ion-item *ngFor="let serialNumber of serialNumbers;">
  <ion-input
    type="text"
    expand="block"
    placeholder="شماره سریال"
    required
    name="serialNumbers"
    [(ngModel)]="serialNumber"
  ></ion-input>

在你的newElement()

newElement(){
    this.serialNumbers.push('');//default value.
}

如何使用ionic动态创建具有ngModel属性的元素？

how to dynamically create element with ngModel attribute using ionic?

typescript

ionic-framework

angular