Добавляем динамическую строку в таблицу, но она очищает данные в строке

Question

Добавляем динамическую строку в таблицу, но она очищает данные в строке

1

Что я делаю неправильно здесь. Нужна помощь.

Когда я нажимаю кнопку "Добавить", данные, которые я выбрал в строках таблицы, становятся пустыми. Но когда я выбираю кнопку "Удалить", а затем нажимаю кнопку "Добавить", то она не опорожняется только один раз. Если я вижу консоль, я вижу данные там, но она не появляется на экране. Вот мой код:

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

SK. 06 июнь 2018, в 17:26

Источник

0

Я считаю, что после создания новой строки у вас есть копия каждого ngModel, что у вас есть в начальной строке. Вот почему они исчезают.
Kraken 06 июнь 2018, в 14:53
0

когда вы говорите «иметь копию каждого ngModel, который у вас есть в начальной строке», что это значит? не могли бы вы уточнить немного. И какие-либо предложения?
SK. 06 июнь 2018, в 15:51
0

У тебя есть какое-то решение, Потому что у меня та же проблема.
Mohaimin Moin 22 янв. 2019, в 11:28
0

@MohaiminMoin: я сделал это. Но, честно говоря, я забыл, как сделал. Я не вижу код, потому что требование полностью изменилось вскоре после того, как я закончил эту страницу. Но я вижу (в твоем ответе) ты тоже это сделал. Спасибо и удачи в вашем проекте. :)
SK. 23 янв. 2019, в 13:59
0

да, но я точно не знаю, почему он так себя ведет :(
Mohaimin Moin 29 янв. 2019, в 12:52

Показать ещё 3 комментария

Теги:

angular

javascript

3 ответа

Ещё вопросы

Я считаю, что после создания новой строки у вас есть копия каждого ngModel, что у вас есть в начальной строке. Вот почему они исчезают.
когда вы говорите «иметь копию каждого ngModel, который у вас есть в начальной строке», что это значит? не могли бы вы уточнить немного. И какие-либо предложения?
У тебя есть какое-то решение, Потому что у меня та же проблема.
@MohaiminMoin: я сделал это. Но, честно говоря, я забыл, как сделал. Я не вижу код, потому что требование полностью изменилось вскоре после того, как я закончил эту страницу. Но я вижу (в твоем ответе) ты тоже это сделал. Спасибо и удачи в вашем проекте. :)
да, но я точно не знаю, почему он так себя ведет :(

Mohaimin Moin · Answer 1 · 2019-01-22T10-53-00.000Z

Хорошо, решите проблему: -

Основная проблема в атрибуте name="". name="" должно отличаться в каждой строке. Мы можем решить это двумя способами:

1) Либо измените name="" атрибута name="" динамически, чтобы для каждой строки оно имело свое имя, я сделал это, чтобы добавить индекс с ним как

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

2) Или избегайте name="" и поэтому мы можем избежать [(ngModel)] By [value] и (input) и можем использовать как:

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

Julien Bourdic · Answer 2 · 2018-06-06T13-34-00.000Z

Фактически, все ваши элементы 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 идентификатор threshold при выборе. Используйте свой i чтобы сделать его уникальным. Это то же самое для ваших входных имен. Вы должны добавить [] после имени поля, иначе будет отправлена только последняя строка.

Я добавил console.log из массива после нажатия. Можете ли вы сказать в комментарии, если первый индекс сбрасывается в этот момент?

не повезло. Если я напишу let newNotification = {th ..., он выдаст ошибку компиляции. Так что изменил его, чтобы позволить newNotification: any = {}; newNotification = {thr ..., по крайней мере, без ошибок. Но данные исчезают, как раньше.
А если вы используете var вместо let?
@SK. Я отредактировал свой ответ, чтобы получить больше информации
Добавлен console.log после нажатия в массив и может видеть данные в консоли, но не в пользовательском интерфейсе. к сведению: threshId исходит из базы данных. Я вижу в консоли, что он уникален, и когда я отправляю форму, я могу получить все введенные данные и отправить их на контроллер Java.

slashpm · Answer 3 · 2018-06-06T13-47-00.000Z

-1

Конечно, строка очищается, потому что вы очищаете ее:

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

Таким образом, нажав кнопку "Добавить", связанные значения переопределяются, а затем вы вставляете их в массив. Таким образом, они очищаются :)

slashpm 06 июнь 2018, в 13:47

0

Так какое у вас решение?
SK. 06 июнь 2018, в 15:24
0

Я проверил это сейчас, скопировал ваши ts и html как новый компонент, вот что я вижу: уровень уведомлений, сообщение пустое, затем я ввожу некоторые данные, затем нажимаю «добавить» -> строка 1 остается прежней (не пустой) ) и строка 2 будет добавлена как пустая строка. Я думаю, вы сказали, что после нажатия кнопки «Добавить» обе строки стали пустыми. Можете ли вы как-то показать нам полный код?
slashpm 06 июнь 2018, в 21:13
0

и новая строка всегда пуста, потому что вы специально добавляете элемент {thresholdId: "0", messagesLevel: "", message: ""} в массив уведомлений, который представляет пустую строку
slashpm 06 июнь 2018, в 21:17

Показать ещё 1 комментарий