Angular 4:如何动态添加和删除表中的行
Angular 4:如何动态添加和删除表中的行
提问于 2017-10-04 18:12:48
在我的angular应用程序中，我有3个输入-代码，名称和价格。并且有一个显示用户选择的表格。
当我单击add按钮时，从下拉列表中选择的内容应该填充到表中，
Product Price Action
124578-ABC 100 <Delete Button>当我单击delete按钮时，相应的行应被删除。我尝试过使用jquery来做这件事。但我想知道它的角度方式。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-10-04 18:33:08
试着这样做：
在本例中，我只是使用了textbox而不是您的输入类型
像一样的表
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let field of fieldArray; let i = index">
<td>
<input [(ngModel)]="field.code" class="form-control" type="text" name="{{field.code}}" />
</td>
<td>
<input [(ngModel)]="field.name" class="form-control" type="text" name="{{field.name}}" />
</td>
<td>
<input [(ngModel)]="field.price" class="form-control" type="text" name="{{field.price}}" />
</td>
<td>
<button class="btn btn-default" type="button" (click)="deleteFieldValue(i)">Delete</button>
</td>
</tr>
<tr>
<td>
<input class="form-control" type="text" id="newAttributeCode" [(ngModel)]="newAttribute.code" name="newAttributeCode" />
</td>
<td>
<input class="form-control" type="text" id="newAttributeName" [(ngModel)]="newAttribute.name" name="newAttributeName" />
</td>
<td>
<input class="form-control" type="text" id="newAttributePrice" [(ngModel)]="newAttribute.price" name="newAttributePrice" />
</td>
<td>
<button class="btn btn-default" type="button" (click)="addFieldValue()">Add</button>
</td>
</tr>
</tbody>
</table>typescript示例:
export class Component {
private fieldArray: Array<any> = [];
private newAttribute: any = {};
addFieldValue() {
this.fieldArray.push(this.newAttribute)
this.newAttribute = {};
}
deleteFieldValue(index) {
this.fieldArray.splice(index, 1);
}
}Stack Overflow用户
发布于 2020-03-07 17:00:49
试试这个：
grid-view-component.html
<div class="container" style="margin-top: 5%">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Action</th>
<th>Nmae</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dynamic of dynamicArray; let i = index;">
<td (click)="deleteRow(i)">
<i class="fa fa-trash fa-2x"></i>
</td>
<td>
<input [(ngModel)]="dynamicArray[i].name" class="form-control" type="text" />
</td>
<td>
<input [(ngModel)]="dynamicArray[i].email" class="form-control" type="email" />
</td>
<td>
<input [(ngModel)]="dynamicArray[i].phone" class="form-control" type="number"/>
</td>
</tr>
<tr>
<td (click)="addRow()">
<i class="fa fa-plus fa-2x"></i>
</td>
</tr>
</tbody>
</table>
</div> grid-view-component.ts
import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { DynamicGrid } from '../grid.model';
@Component({
selector: 'app-grid-view',
templateUrl: './grid-view.component.html',
styleUrls: ['./grid-view.component.css']
})
export class GridViewComponent implements OnInit {
constructor(private toastr: ToastrService) { }
dynamicArray: Array<DynamicGrid> = [];
newDynamic: any = {};
ngOnInit(): void {
this.newDynamic = {name: "", email: "",phone:""};
this.dynamicArray.push(this.newDynamic);
}
addRow() {
this.newDynamic = {name: "", email: "",phone:""};
this.dynamicArray.push(this.newDynamic);
this.toastr.success('New row added successfully', 'New Row');
console.log(this.dynamicArray);
return true;
}
deleteRow(index) {
if(this.dynamicArray.length ==1) {
this.toastr.error("Can't delete the row when there is only one row", 'Warning');
return false;
} else {
this.dynamicArray.splice(index, 1);
this.toastr.warning('Row deleted successfully', 'Delete row');
return true;
}
}
} grid.model.ts
export class DynamicGrid{
name:string;
email:string;
phone:string;
}Stack Overflow用户
发布于 2017-12-20 21:12:09
只需添加具有相同字段的两行。具有相同字段的一个将避免fieldArray初始为null，而具有相同字段的另一个用于* and，如下所示
<table>
<tr>
</tr>
<tr *ngFor>
</tr>
</table>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46562305
复制相关文章
相似问题
腾讯云开发者
