Angular 2, получить отредактированные данные из HTML таблицы

Question

В нашем приложении angular 2 есть таблица html, которая отображает данные из базы данных. Теперь нам нужно сделать несколько элементов в таблице доступными для редактирования. Я сделал необходимые элементы доступными для редактирования и добавил кнопку обновления, при нажатии на кнопку обновления мне нужно получить отредактированное значение строки вместе с идентификатором строки.

Пожалуйста, помогите мне, как этого добиться . Ниже приведен мой код.

        <tr  *ngFor="let row of tableData;">
        <td >{{ row.id}}</td>                   
        <td contenteditable="true">{{ row.editableData1 }}</td>
        <td contenteditable="true">{{ row.editableData2}}</td>
        <td style="color: black;">{{ row.user }}</td>
        <td class="link">
        <button  (click)="updatetoDB()" type="button">&nbsp;&nbsp;Update&nbsp;&nbsp;</button>
        </td>
    </tr>

Итак, когда пользователь нажимает кнопку «Обновить», мне нужно получить отредактированные данные и идентификатор строки. Заранее спасибо :)

Answer 1

# метод data1 может не работать, потому что элемент td не имеет атрибута value.

Можете ли вы попробовать добавить элемент ввода в свой td следующим образом:

<tr  *ngFor="let row of tableData;">
    <td >{{ row.id}}</td>                   
    <td contenteditable="true"><input type="text" [value]="row.editableData1" #data1/></td>
    <td contenteditable="true"><input type="text" [value]="row.editableData2" #data2/></td>
    <td style="color: black;">{{ row.user }}</td>
    <td class="link">
    <button  (click)="updatetoDB(data1, data2, row.id)" type="button">Update</button>
        </td>
</tr>

Я думаю, что это должен работать, но вы должны включить элемент ввода в свой td. Это раздражает?

Answer 2

Привет,

Лучшее решение - использовать реактивную форму.

Но я думаю, вы можете назвать отредактированные данные и передать их в updateToDB функции следующим образом:

<tr  *ngFor="let row of tableData;">
        <td >{{ row.id}}</td>                   
        <td contenteditable="true" #data1>{{ row.editableData1 }}</td>
        <td contenteditable="true" #data2>{{ row.editableData2}}</td>
        <td style="color: black;">{{ row.user }}</td>
        <td class="link">
        <button  (click)="updatetoDB(data1, data2, row.id)" type="button">&nbsp;&nbsp;Update&nbsp;&nbsp;</button>
        </td>
    </tr>

Регистрируйте содержимое переменных data1 и data2, я думаю, что данные тура должны быть в data1.value и data2.value.

Надеюсь, что это вам поможет.