Question

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

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

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

Answer 1

好，解决问题：-

主要问题在于public enum DataTableType { None = 0, Type1 = 1, Type2 = 2, Type3 = 3, }属性。 name=""每行必须不同。我们可以通过两种方式解决它：

1）要么动态更改name=""属性名称，以使每一行都有不同的名称，我这样做是为了向其添加索引号为

name=""

2）或避免使用<input [(ngModel)]="notification.notificationLevel" name="notificationThreshold{{i}}" required class="form-control" type="text" />，因此我们可以通过name=""和[(ngModel)]避免使用[value]，并且可以像这样使用：-

(input)

Answer 2

事实上，您的所有newNotification元素都是this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};的同一个实例。通过执行此操作：newNotification您实际上也因为它而重置了第一行。

尝试将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; } }存储在var中：

threshold

更新：

我不知道它是否相关，但您的选择中会有重复的i个ID。使用[]使其独一无二。输入名称也是一样的。您应该在字段名称后面添加console.log，否则只会提交最后一行。

我在推送后添加了self.token个数组。你能否在评论中说明此时是否重置了第一个索引？

Answer 3

当然行已清除，因为您正在清除它：

this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};

因此，在单击“添加”按钮时，将覆盖绑定值，然后将其推入阵列。因此他们被清除了:)）

在表中添加动态行，但它正在清空行中的数据

3 个答案: