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

要添加行，只需要将数据推送到数组中。

如果您希望现有数据是简单显示的文本，而您希望将新数据作为输入，则必须向每个电话添加一个新属性来通知您是否设置了此项目，或者是否需要设置此项目/编辑

在您的.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项的键入，还取决于是否显示/隐藏了验证按钮。该项目是文本还是输入

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

1 个答案: