typescript 在 Angular 5 中动态添加文本框和文本/芯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50374655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add textbox and text/chip dynamically in Angular 5
提问by S. K.
I want to add textbox (max 10) dynamically with a close (X) button and then want to add some text to it. Text should show in different view after click Save button. Added textbox or text should be removable if click on the close button (X).
我想用关闭 (X) 按钮动态添加文本框（最多 10 个），然后想向其中添加一些文本。单击“保存”按钮后，文本应显示在不同的视图中。如果单击关闭按钮 (X)，添加的文本框或文本应该是可移除的。
The view can toggle with an edit\close button.
视图可以使用编辑\关闭按钮进行切换。
回答by S. K.
app.component.ts
app.component.ts
fieldArray: Array<any> = [];
newAttribute: any = {};
firstField = true;
firstFieldName = 'First Item name';
isEditItems: boolean;
addFieldValue(index) {
if (this.fieldArray.length <= 2) {
this.fieldArray.push(this.newAttribute);
this.newAttribute = {};
} else {
}
}
deleteFieldValue(index) {
this.fieldArray.splice(index, 1);
}
onEditCloseItems() {
this.isEditItems = !this.isEditItems;
}
app.component.html
应用程序组件.html
<div class="container">
<br>
<div class="row">
<table class="table table-striped table-bordered col-lg-4">
<caption><i>Add/remove textbox and chip dynamically in Angular 6</i></caption>
<thead>
<tr>
<th>Item Name
<a (click)="onEditCloseItems()" class="text-info float-right">
<i class="mdi mdi-{{isEditItems ? 'close' : 'pencil'}} mdi-18px"></i>
</a>
</th>
</tr>
</thead>
<tbody *ngIf="!isEditItems">
<tr *ngIf="firstField">
<td>
<i (click)="firstField = false" class="mdi mdi-close mdi-18px"></i> {{firstFieldName}}
</td>
</tr>
<tr *ngFor="let field of fieldArray; let i = index">
<td *ngIf="field?.name">
<i (click)="deleteFieldValue(i)" class="mdi mdi-close mdi-18px"></i> {{field.name}}</td>
</tr>
</tbody>
<tbody *ngIf="isEditItems">
<tr>
<td *ngIf="firstField">
<div class="input-group">
<div class="input-group-prepend">
<div (click)="firstField = false" class="input-group-text"><i class="mdi mdi-close mdi-18px"></i></div>
</div>
<input [(ngModel)]="firstFieldName" class="form-control py-2 " type="text" name="firstFieldName" placeholder="Item Name">
</div>
</td>
</tr>
<tr *ngFor="let field of fieldArray; let i = index">
<td>
<div class="input-group">
<div class="input-group-prepend">
<div (click)="deleteFieldValue(i)" class="input-group-text"><i class="mdi mdi-close mdi-18px"></i></div>
</div>
<input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" placeholder="Item Name">
</div>
</td>
</tr>
<tr>
<td align="right">
<button *ngIf="fieldArray.length <= 2" class="btn btn-success btn-sm" type="button" (click)="addFieldValue()" style="margin-right:10px">Add More Item</button>
<button (click)="onEditCloseItems()" class="btn btn-primary btn-sm" type="button">Save Items</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
EditedStackblitz demo link 2
