Angular 2-редактирование строк таблицы inline, а затем сохранение новых данных

Я пытаюсь сделать компонент, который показывает данные в строках из модели TableData,

export class TableData{
    constructor(
        public id: number,
        public country: string,
        public capital: string){ }
}

у меня есть мои данные в компоненте, как это,

tableData: TableData[] = [
        new TableData(1, 'Canada','Ottawa'),
        new TableData(2, 'USA','Washington DC'),
        new TableData(3, 'Australia','Canberra'),
        new TableData(4, 'UK','London')
        ];

затем в моем компоненте я создаю таблицу, подобную этой,

<table>
  <tbody>
     <tr *ngFor="#row of tableData>
        <td contenteditable='true'>{{ row.id }}</td>
        <td contenteditable='true' (click)="onRowClick($event)">{{ row.country }}</td>
        <td contenteditable='true'>{{ row.capital }}</td>
     </tr>
 </tbody>
<span>{{ tableData | json }}</span>
</table>

onRowClick(event){
console.log(event);
}

Я могу редактировать данные, как я пометил <td> элемент как contenteditable, но не знаю, как сохранить его или получить обновленные значения. Я проверил данные "события", переданные методу onRowClick, но не смог получить "id" строки (она пуста. событие.srcElement.id или событие.цель.id оба пустые).

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

любое руководство о том, как решить мою проблему, очень ценится!

6
angular

2 ответов

Juts pass id как флаг вместе с вашим идентификатором затем обнаружить в соответствии с идентификатором нажал на строку таблицы вот пример -

tableData: TableData[] = [
        new TableData('Canada','Ottawa',1),
        new TableData('USA','Washington DC',2),
        new TableData('Australia','Canberra',3),
        new TableData('UK','London',4)
        ];

  • PS-ваш код бросает ошибку здесь, пожалуйста, исправьте здесь.

    <tr *ngFor="#row of tableData>

следует изменить на

<tr *ngFor="#row of tableData">

рабочая демо здесь пример Plunker

обновление - Попробуйте использовать (input) привязка события к td и вам обновленный текст с помощью event.target.outerText . пожалуйста, проверьте обновление plnukr.

<tr *ngFor="#row of tableData">
  <td contenteditable='true' (input)="onRowClick($event, row.id)">{{ row.country }}</td>
  <td contenteditable='true'>{{ row.capital }}</td>
</tr>

onRowClick(event, id){
    console.log(event.target.outerText, id);
  }
13

Я искал ответ на тот же вопрос. Сначала я добрался сюда. Позже я нашел потрясающую статью с ответом, который вы искали.

Обновлено: у меня есть udpated plunk, а также директивный код для последней версии angular

4