在表中添加动态行，但它正在清空行中的数据 [英] Adding Dynamic row in table, but it is emptying data in the row

问题描述

我在这里做错了什么。需要帮助。

What am I doing wrong here. Need help.

当我点击添加按钮时，我在表格行中选择的数据变为空白。但是当我选择删除按钮然后单击添加按钮时，它不会仅清空一次。如果我看到控制台，我可以在那里看到数据，但它没有显示在屏幕上。


这是我的代码：

When I click on "Add" button, the data I selected in the rows of table are becoming blank. But When I select Delete button and then click on Add button, then it not emptying of one time only. If I see console, I can see data there, but it is not showing up on the screen. Here is my code:

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：

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;
    }
}

推荐答案

好的，解决问题： -

Ok, solve the problem:-

主要问题是 name =属性。 name =每行必须有所不同。我们可以通过两种方式解决它：

The main problem is in name="" attribute. name="" must differ in each row .We can solve it in two ways:

1）要么改变 name =属性名称是动态的，因此对于每一行都有不同的名称，我这样做是为了添加索引编号为

1) Either Change the name="" attributes name dynamically so that for every row it has a different name, i did it to add index number with it as

<input [(ngModel)]="notification.notificationLevel" name="notificationThreshold{{i}}" required class="form-control" type="text" />

2）或者避免 name =我们可以避免 [（ngModel）] 按 [value] 和（输入） 并且可以使用如下： -

2) Or avoid name="" and so We can avoid [(ngModel)] By [value] and (input) and can use as like :-

 <input [value]="notification.notificationLevel" (input)="notification.notificationLevel=$event.target.value" required class="form-control" type="text"/>

这篇关于在表中添加动态行，但它正在清空行中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！