Динамически добавлять HTML-контент на страницу Ionic

Question

У меня есть такой компонент, как на этом рисунке , и я хочу динамически добавлять html-контент на страницу, когда пользователь нажимает кнопку добавления в правом верхнем углу. Содержимое, которое я хочу добавить, представляет собой ионный ряд с некоторыми столбцами, который будет содержать ионный вход, который будет редактируемым. Обратите внимание, что предварительно заполненные элементы - это просто текст, а не поля ввода ионов. Кто-нибудь знает, как добавить динамический контент на страницу?

EDIT: Код моего html-компонента:

      <ion-row style="margin-top:5px;background: #272753">
    <ion-col col-11 style="color:#59597b;padding-left: 10px;font-size: 12px">
      ΤΗΛΕΦΩΝΑ ΕΙΔΟΠΟΙΗΣΗΣ (ΣΕΙΡΑ ΠΡΟΤΕΡΑΙΟΤΗΤΑΣ)
    </ion-col>
    <ion-col col-1>
      <ion-icon float-right name="add" style="color: #ffc200;padding-right: 10px;" (click)="addPhoneNotices()"></ion-icon>
    </ion-col>
  </ion-row>
  <ion-row *ngFor="let phoneNotice of phoneNotices; let i = index;" style="margin-bottom:2px;background: #272753;">
    <ion-col col-1>
      <img src="../assets/imgs/drag-icon.png" style="height:20px;width:20px;">
    </ion-col>
    <ion-col col-5 style="color:#ffffff">
      {{phoneNotice.name}}
    </ion-col>
    <ion-col col-5 style="color:#ffffff">
      {{phoneNotice.phone}}
    </ion-col>
    <ion-col col-1>
      <ion-icon float-right name="close" style="color:#ffffff; margin-right:10px"></ion-icon>
    </ion-col>
  </ion-row>

Код моего файла TS:

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

@IonicPage()
@Component({
  selector: 'page-new-customer',
  templateUrl: 'new-customer.html',
})
export class NewCustomerPage {

  phoneNotices: Array<{ name: string, phone: string }> = [
    { name: "Ελένη Γεωργίου", phone: "211 45 55 456" },
    { name: "Βαγγέλης Γεωργίου", phone: "687 64 52 354" },
    { name: "Αγγελική Γεωργίου", phone: "687 64 52 354" },
  ];
constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

}

Как вы можете видеть, я использую цикл ngFor для отображения элементов. Теперь вопрос заключается в том, как динамически добавить строку с ионно-входными столбцами. Кто-нибудь знает, как добавить функцию addPhoneNotice (), которая добавит в макет строку со столбцами ионного ввода?

Спасибо

Answer 1

Чтобы добавить строки, вам просто нужно поместить данные в ваш массив.

Если вы хотите, чтобы ваши существующие данные были простым отображаемым текстом, а ваши новые данные - входными данными, вам нужно будет добавить новое свойство к каждому phoneNotice, чтобы знать, установлен ли этот элемент или этот элемент нужно установить / изм

В вашем файле .ts:

// Add a new property to each item of the array, to know if the item has to be displayed as text or needs to be displayed as an input

phoneNotices: Array<{ name: string, phone: string, set: boolean }> = [
    { name: "Ελένη Γεωργίου", phone: "211 45 55 456", set: true },
    { name: "Βαγγέλης Γεωργίου", phone: "687 64 52 354", set: true },
    { name: "Αγγελική Γεωργίου", phone: "687 64 52 354", set: true },
  ];

// Now you set a function to push data to your array when user wants to add something. You can for example list this function to a button
add(){
    // We add an empty element to the array
    this.phoneNotices.push(name: "", phone: "", set: false)
}

// This function will allow you to make a ion-input become a simple text display when users finishes to input the phoneNotice item
validate(index){
    // We set the phoneNotice at given index completed
    this.phoneNotices[index].set = true;
}

Теперь в вашем HTML-файле:

<ion-row *ngFor="let phoneNotice of phoneNotices; let i = index;" style="margin-bottom:2px;background: #272753;">
    <ion-col col-1>
      <img src="../assets/imgs/drag-icon.png" style="height:20px;width:20px;">
    </ion-col>
    <ion-col col-5 style="color:#ffffff">
      <ion-input *ngIf="!phoneNotice.set" type="text" [(ngModel)]="phoneNotice.name">
      <p *ngIf="phoneNotice.set">{{phoneNotice.name}}</p>
    </ion-col>
    <ion-col col-5 style="color:#ffffff">
      <ion-input *ngIf="!phoneNotice.set" type="tel" [(ngModel)]="phoneNotice.phone">
      <p *ngIf="phoneNotice.set">{{phoneNotice.phone}}</p>
    </ion-col>
    <ion-col col-1 *ngIf="phoneNotice.set">
      <ion-icon float-right name="close" style="color:#ffffff; margin-right:10px"></ion-icon>
    </ion-col>
    <ion-col col-1 *ngIf="!phoneNotice.set">
      <button ion-button (click)="validate(i)">Validate</button>
    </ion-col>
</ion-row>

В html-файле есть директивы *ngIf, позволяющие выбрать отображение простого текста или ввода в зависимости от того, закончил ли пользователь вводить элемент phoneNotice, а также показать / скрыть кнопку подтверждения в зависимости от того, является ли элемент это текст или ввод