html - Ionic 3 - 单击按钮时动态添加行
问题描述
当我点击一个按钮时,我想添加一个新行。
<button ion-button large full color="dark" (click)="onClickNewRow()">New Row</button>
这是我要添加的那种行
<ion-row>
<ion-col col-12>
Compétences recherchées
<ion-list>
<ion-item>
<ion-label>Compétence</ion-label>
<ion-select [(ngModel)]="Competences">
<ion-option value="informatique">Informatique</ion-option>
<ion-option value="jardinnage">Jardinnage</ion-option>
<ion-option value="impression3D">Impression 3D</ion-option>
<ion-option value="menuiserie">Menuiserie</ion-option>
<ion-option value="secouriste">Secouriste</ion-option>
<ion-option value="montagevideo">Montage Video</ion-option>
<ion-option value="excel">Excel</ion-option>
<ion-option value="word">Word</ion-option>
<ion-option value="sharepoint">Sharepoint</ion-option>
<ion-option value="soudeur">Soudeur</ion-option>
</ion-select>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
我不知道该怎么做。任何人都可以帮助我吗?我应该在我的函数“onClickNewRow”中写什么?我使用 Ionic 3,所以 TypeScript 和 HTML
解决方案
在 Stackblitz 上查看应用程序功能 - https://stackblitz.com/edit/ionic-52yybh
<!-- home.html -->
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<button ion-button (click)="addRow()">Add</button>
<ion-list>
<div *ngFor="let i of inputRowValue; let ii=index" style="font-size:smaller">
<app-input-row [data]="i" (onDelete)="onDelete($event)"></app-input-row>
</div>
</ion-list>
<pre> {{inputRowValue | json}} </pre>
</ion-content>
--
// home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InputRowComponent } from './input-row/input-row.component'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
inputRowValue = [{}]
constructor(public navCtrl: NavController) {}
addRow() {
this.inputRowValue.push({})
}
onDelete(_event) {
console.log(_event)
this.inputRowValue = this.inputRowValue.filter((i: any) => i.id !== _event.id)
}
}
-- input-row.component.html
<ion-item-sliding>
<ion-item>
<ion-label>Compétence {{index}}</ion-label>
<ion-select [(ngModel)]="data.value">
<ion-option value="informatique">Informatique</ion-option>
<ion-option value="jardinnage">Jardinnage</ion-option>
<ion-option value="impression3D">Impression 3D</ion-option>
<ion-option value="menuiserie">Menuiserie</ion-option>
<ion-option value="secouriste">Secouriste</ion-option>
<ion-option value="montagevideo">Montage Video</ion-option>
<ion-option value="excel">Excel</ion-option>
<ion-option value="word">Word</ion-option>
<ion-option value="sharepoint">Sharepoint</ion-option>
<ion-option value="soudeur">Soudeur</ion-option>
</ion-select>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" (click)="deleteClicked(item)">DELETE</button>
</ion-item-options>
</ion-item-sliding>
-- 输入行.component.ts
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-input-row',
templateUrl: './input-row.component.html',
styleUrls: ['./input-row.component.css']
})
export class InputRowComponent implements OnInit {
@Input() data: any
@Output() onDelete = new EventEmitter<any>();
constructor() {
}
ngOnInit() {
this.data.id = new Date().getTime()
}
deleteClicked() {
console.log("deleteClicked")
this.onDelete.next(this.data)
}
}
推荐阅读
- vue.js - Google Cloud Builder - vuejs,gulp 构建失败
- java - 如何在android中从facebook获取用户性别和生日
- react-native - React Native - 无效的道具儿童
- javascript - SuiteScript 1.0:自定义按钮将未提交的现金销售子列表复制到发票
- javascript - 截止日期过后如何禁用复选框
- excel - SUMIFS 小于表中的条件
- azure - 如何让 HDInsight/Spark 集群在空闲时收缩?
- bash - Bash 相等变量不相等
- jpa - 如何在join jpa中过滤实体B
- c# - 从控制台应用程序中的密钥保管库中检索密钥,而不在代码中保存 Azure AppID 和机密