После добавления нового значения в массив предыдущие значения входов в * ngFor Table становятся пустыми - PullRequest
Новая
       14

После добавления нового значения в массив предыдущие значения входов в * ngFor Table становятся пустыми

1 голос
/ 24 сентября 2019

Я создаю проект, в котором у меня есть таблица входов, где пользователь вводит имя записи, описание, цену, количество и одно поле флажка.так как я применил цикл к строкам и инициализированный массив с одним пустым значением, чтобы показать одну пустую строку для заполнения пользователем, тогда пользователь может нажать на кнопку, указанную в первом столбце.

Где я нажимаю другое пустое значениев этом массиве после нажатия обновлений таблицы, а также добавление новой строки в таблицу, но при вводе предыдущих строк будет получен пустой снимок экрана.

массив, используемый для ngfor: 

// items table fields
invoiceitems = [
    {
        id: this.idcount,
        name: "",
        description: "",
        price: "",
        qty: "",
        amount: "",
        istax: "",
        selectedItem: {}
    }
];

Таблица в html: 

   <div class="table-responsive">
        <table class="table table-bordered">
            <thead class="table-head table-head">
                <tr class="text-white">
                    <th class="invoice-detail-margin">#</th>
                    <th class="invoice-detail-summary">Description</th>
                    <th class="invoice-detail-rate">Rate</th>
                    <th class="invoice-detail-quantity">Qty</th>
                    <th class="invoice-detail-total">Amount</th>
                    <th class="invoice-detail-tax">Tax</th>
                </tr>
            </thead>
            <tbody>

                <tr class="item-row item-row-1 with-tax"
                    *ngFor="let item of invoiceitems; let i = index">
                    <td class="item-row-actions">
                        {{item | json}}
                        <div class="confirm-delete-button">
                            <button type="button" title="Remove Item" (click)="removeitem(i)"
                                style="border-color: rgb(51, 51, 51); color: rgb(51, 51, 51);"
                                class="btn btn-remove table-head plus-minus-btn">
                                <span class="plus-minus-icon-span">
                                    <i class="fas fa-minus"></i>
                                </span>
                            </button>
                        </div>
                    </td>
                    <td data-label="Item #1" class="item-row-summary">
                        <span class="item-row-name">
                            <div class="item-suggest">
                                <div role="combobox" aria-haspopup="listbox"
                                    aria-owns="react-autowhatever-1" aria-expanded="false"
                                    class="react-autosuggest__container">
                                    <input type="text" autocomplete="off" [(ngModel)]="item.name"
                                        aria-autocomplete="list"
                                        aria-controls="react-autowhatever-1" name="item-name"
                                        class="react-autosuggest__input invoice-input"
                                        id="invoice-item-code" placeholder="Item Description">
                                    <!-- 
                                    <ng-select class="custom"
                                        (change)="itemselected(item.selectedItem, i)"
                                        [items]="Items" bindLabel="name" autofocus name="item-name"
                                        [(ngModel)]="item.selectedItem" required>
                                    </ng-select> -->

                                    <div id="react-autowhatever-1" role="listbox"
                                        class="react-autosuggest__suggestions-container">
                                    </div>
                                </div>
                            </div>
                        </span>
                        <span class="item-row-description">
                            <textarea style="min-height: 80px; height: 69px;"
                                [(ngModel)]="item.description" name="item-descrition"
                                class="item-description-input invoice-input"
                                placeholder="Additional details"></textarea>
                        </span>
                    </td>
            </tbody>
        </table>
    </div>

Вот как я создаю новую строку: 

    this.invoiceitems.push({
        id: this.idcount + 1,
        name: "",
        description: "",
        price: "",
        qty: "",
        amount: "",
        istax: "",
        selectedItem: {}
    });

Первая запись перед добавлением новой строки:

снимок экрана с первой записью

После добавления новой строки в таблицу:

после новой строки

1 Ответ

0 голосов
/ 25 сентября 2019

Исходя из вашего ответа на мой комментарий, вы используете форму, поэтому вы регистрируете элементы управления формы с помощью ngModel и атрибута name.Поскольку вы используете один и тот же name для всех строк, angular считает, что все столбцы в строках - это один и тот же элемент управления формы, см. Шаблон здесь: STACKBLITZ Вы можете видеть, что естьв форме присутствует только одно значение, независимо от того, сколько у вас строк.

Это можно решить, присвоив каждому элементу управления уникальное имя (или удалив теги формы).Присвоение атрибуту имени уникального имени можно использовать с помощью индекса, поэтому вместо этого: 

<input [(ngModel)]="item.name" name="item-name" placeholder="Item Description">

do: 

<input [(ngModel)]="item.name" [name]="'item' + i" placeholder="Item Description">

, где i - индекспредмет от *ngFor.Сделайте то же самое для всех полей вашего столбца.Вот STACKBLITZ , демонстрирующий это.

...