Блог

Главная - Вопросы по программированию - Удаление строки FormArray в FormGroup неверно для полей ввода в таблице MatTable

Удаление строки FormArray в FormGroup неверно для полей ввода в таблице MatTable

#angular #angular-material #formarray

Вопрос:

У меня есть матирующий стол, сформированный из массива форм. Когда я удаляю строку, значения в полях ввода моей таблицы изменяются не так, как следовало бы. Но в объекте все данные после удаления строки в порядке. Помогает только обновить таблицу после удаления строки, но я думаю, что она должна работать как есть, без обновления. Я привел пример этого феномена: Стекблитц, в чем моя ошибка?

Комментарии:

1. Все работает нормально. если 1 удалите 1 или 2 и обновите их, они останутся удаленными.

2. Да, он отлично работает только при ручном обновлении (нажатием кнопки «Обновить»). Но я уверен, что он должен просыпаться автоматически.

3. он даже работает автоматически. Если я удалю какую-либо строку, она будет удалена.

4. Я думаю, вы не понимаете, в чем проблема. Да, это удаление, но после того, как оно было удалено, имена полей не соответствуют их значениям в количестве полей. Например: перед удалением: яблоко 1, банан 2, лимон3. ПОСЛЕ удаления 1-го ряда: банан 1, лимон 2. Но должен быть банан 2, лимон 3, не так ли?

Ответ №1:

Если вы удалите это свойство [trackBy]="trackByIndex" из своего <table> тега, ваша проблема будет решена,

Прочитав ваш комментарий, попробуйте изменить свой trackByIndex метод, как показано ниже,

 trackByIndex(i, row: any) {
    return `${row.product_count}`;
}

Основываясь на новом комментарии с условием отсутствия курсора, вы можете попробовать этот подход, просто измените свой deleteRow метод, как показано ниже

 deleteRow(row: any, index: number) {
    const control = <FormArray>this.myForm.controls['tableFields'];
    control.removeAt(index);
    this.refreshTable(); // add this method, it will refresh your grid
}

Комментарии:

1. Затем таблица теряет свою функцию отслеживания и начинает повторять каждый ввод, теряя курсор в поле ввода. В моем рабочем проекте (не в примере с Stackblitz) без [trackBy]=»trackByIndex» я даже не могу поместить курсор в поле ввода

2. Я снова изменил свой ответ, пожалуйста, взгляните

3. курсор по-прежнему исчезает после каждого ввода символа ((

4. Можете ли вы сделать еще одну вещь с вашим кодом, попробуйте вызвать этот refreshTable() метод в своем deleteRow() методе

5. «Можете ли вы сделать еще одну вещь с вашим кодом, попробуйте вызвать этот метод refreshTable() в своем методе deleteRow ()» — Я просто делаю это, как вы сказали в моем рабочем проекте. Но я думаю, что это неправильный путь? Это решение-костыли (как говорят в России:))

Метки: