![](/img/trans.png)
[英]Create a dynamic table with adding column and row that depends on data in JQuery or JavaScript
[英]Adding Dynamic row in table, but it is emptying data in the row
我在这里做错了。 需要帮忙。
当我单击“添加”按钮时,我在表行中选择的数据将变为空白。 但是,当我选择“删除”按钮然后单击“添加”按钮时,它不会一次只清空。 如果我看到控制台,则可以在那里看到数据,但是它没有显示在屏幕上。
这是我的代码:
的HTML:
<div class="container">
<div class="row" style="margin-bottom: 10px;">
<div class="col">
<div class="row111">
<label for="Select Image" class="col-sm-311 col-form-label111">Add Threshold and Notification for this Inspection: </label>
<div class="col-sm-9">
</div>
</div>
</div>
<div class="col">
<div class="float-right">
<button class="btn btn-default" type="button" (click)="addNotification()">Add</button>
</div>
</div>
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Threshold</th>
<th>Notification Level</th>
<th>Message</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- <tr> -->
<tr *ngFor="let notification of notificationArray; let i = index">
<td>{{i+1}}</td>
<td>
<select class="form-control" maxlength="50" readonly
required
id="threshold"
name="notification.thresholdId"
[(ngModel)]="notification.thresholdId"
#threshold="ngModel" >
<option value="0" selected> Select </option>
<option *ngFor="let threshold of thresholdList" value="{{threshold.thresholdId}}" >
{{threshold.threshold}}
</option>
</select>
</td>
<td>
<input [(ngModel)]="notification.notificationLevel" required class="form-control" type="text" name="notification.notificationLevel" />
</td>
<td>
<input [(ngModel)]="notification.message" required class="form-control" type="text" name="notification.message" />
</td>
<td>
<button class="btn btn-default" type="button" (click)="deleteNotification(i)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
component.ts:
notificationArray: Array<NotificationLevel> = [];
newNotification: any = {};
ngOnInit(): void {
this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
this.notificationArray.push(this.newNotification);
}
addNotification(index) {
this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
this.notificationArray.push(this.newNotification);
console.log(this.notificationArray); // I can see all entered data in console
return true;
}
deleteNotification(index) {
if(this.notificationArray.length ==1) {
alert("At least one Notification Required for an Inspection");
return false;
} else {
this.notificationArray.splice(index, 1);
return true;
}
}
好,解决问题:
主要问题在于name=""
属性。 每行中的name=""
必须不同。我们可以通过两种方式解决它:
1)可以动态地更改name=""
属性名称,以便每行具有不同的名称,我这样做是为了将索引号添加为
<input [(ngModel)]="notification.notificationLevel" name="notificationThreshold{{i}}" required class="form-control" type="text" />
2)或避免使用name=""
,因此我们可以通过[value]
和(input)
避免使用[(ngModel)]
[value]
,并且可以像这样使用:-
<input [value]="notification.notificationLevel" (input)="notification.notificationLevel=$event.target.value" required class="form-control" type="text"/>
实际上,您所有的notificationArray
元素都是newNotification
的相同实例。 通过这样做: this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
您实际上也因此而重置了第一行。
尝试将newNotification
存储在var中:
notificationArray: Array<NotificationLevel> = [];
newNotification: any = {};
ngOnInit(): void {
var newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
this.notificationArray.push(newNotification);
}
addNotification(index) {
console.log(this.notificationArray);
// here is the correction
var newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
this.notificationArray.push(newNotification);
console.log(this.notificationArray);
return true;
}
deleteNotification(index) {
if(this.notificationArray.length ==1) {
alert("At least one Notification Required for an Inspection");
return false;
} else {
this.notificationArray.splice(index, 1);
return true;
}
}
更新:
我不知道它是否相关,但是您选择的threshold
ID会重复。 使用您的i
使其具有独特性。 输入名称相同。 您应在字段名称后添加[]
,否则将仅提交最后一行。
推送后,我添加了一个console.log
。 您可以在注释中告诉您此时是否重置了第一个索引吗?
当然,该行已清除,因为您正在清除它:
this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
因此,在单击添加按钮时,绑定值将被覆盖,然后将其推入数组。 因此它们被清除了:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.