Блог

Главная - Вопросы по программированию - как динамически создать элемент с атрибутом ngModel с помощью ionic?

как динамически создать элемент с атрибутом ngModel с помощью ionic?

#angular #typescript #ionic-framework

#угловой #машинописный текст #ионный каркас

Вопрос:

Я пытаюсь 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);  }

Это ввод по умолчанию при первой загрузке страницы:

 lt;ion-itemgt;  lt;ion-input  type="text"  expand="block"  placeholder="شماره سریال"  required  name="serialNumbers"  [(ngModel)]="serialNumbers"  gt;lt;/ion-inputgt;

serialNumbers массив принимает только значение входных данных по умолчанию

Комментарии:

1. вы можете использовать угловые *ngIf или *ngFor . Прямое управление DOM с помощью angular не рекомендуется. Кроме того, ion-input это ионный компонент, а не элемент DOM. createElement не будет работать с этим

2. Спасибо, но как я могу это сделать, используя *ngIf или *ngFor?

3. Является ли SerialNumbers массивом с каждым входом для каждого числа?

4. да, это так

Ответ №1:

Для этого вам нужно использовать угловые шаблоны. Прямое управление DOM с помощью angular не рекомендуется. Вместо этого используйте структурные директивы.

В вашем классе компонентов есть массив входных данных

 serialNumbers: any = [];

В компоненте,

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

В вашем newElement() 

 newElement(){  this.serialNumbers.push('');//default value. }
Метки: