将 html 内容动态添加到页面 Ionic

Question

我有一个类似picture 中的组件，我想在用户单击右上角的添加按钮时向页面动态添加 html 内容。我要添加的内容是一个离子行，其中一些列将包含一个可编辑的离子输入。请注意，预填充的项目只是文本而不是离子输入字段。 有人知道如何向页面添加动态内容吗？

编辑： 我的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 项目的键入，还可以根据项目是否显示/隐藏验证按钮是文本还是输入