发表于： 2021-07-16 21:27:54
0 2012
今天完成的事情：实现，点击按钮添加 input 输入框（动态添加input 输入框）
明天计划的事情：新增列表页写好
收获：
声明数组对象；循环数组对象；声明的数组对象中，点击加号按钮往数组对象中push一个对象。。
<main class="main">
<div class="row dynamic-item" *ngFor="let item of optionList;let i = index">
<label class="col-md-2 col-form-label text-right">
<span class="text-danger">*</span>字段{{i + 1}}</label>
<div input-group>
<input class="input" type="text" nz-input [(ngModel)]="item.name">
</div>
<div class="btn" *ngIf="i === optionList.length - 1">
<i nz-icon nzType="plus" class="cursor-pointer" (click)="addOption()" nzTheme="outline"></i>
</div>
<div *ngIf="optionList.length > 1">
<i nz-icon nzType="minus" class="cursor-pointer" (click)="catOption(i, item.id)" nzTheme="outline"></i>
</div>
</div>
</main>
public optionList: Array<any> = [{ title: '字段一', name: '', id: 1 }];
constructor() { }
ngOnInit(): void {
}
// 添加选项
public addOption() {
var tmpnewchar = ''
// for (let i = 1; i < this.optionList.length; i++) {
switch (this.optionList.length + 1) {
case 1: tmpnewchar += "一"; break;
case 2: tmpnewchar += "二"; break;
case 3: tmpnewchar += "三"; break;
case 4: tmpnewchar += "四"; break;
}
console.log(tmpnewchar);
// }
this.optionList.push({ title: '字段' + tmpnewchar, name: '', id: 1 });
console.log(this.optionList);
}
// 删除选项
async catOption(index: number, id: any) {
this.optionList.splice(index, 1);
}
返回列表
评论