Обновите значение ячейки таблицы динамически, используя angular6

Question

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

<div class='table_small'>
        <div class='table_cell'>Status</div>
        <div class='table_cell'>
          <p class="status" >{{incomingData.status}}</p>
        </div>
      </div>

Обратите внимание, что здесь «данные» являются массивом (* ngFor) и используются в данных строк, а в таблице несколько данных.

Теперь у меня есть ситуация, когда внутри таблицы есть кнопкаСтроки для отмены определенного порядка, когда пользователь нажимает, появляется всплывающее окно / модальное подтверждение для пользователя, если пользователь выбирает «Да», это временно изменит значение поля состояния на «Отмена в процессе», прежде чем он достигнетЕсли после успешного ответа клиента произойдет смена станции на «отмененную».

Я действительно не уверен, как выполнить отмену в ячейке таблицы, если кто-то может дать представление об этомпожалуйста.

Спасибо

Answer 1

Вы можете передать элемент в функцию и отредактировать его статус:

<div class='table_small'>
    <div class='table_cell'>Status</div>
    <div class='table_cell'>
      <p class="status" >{{incomingData.status}}</p>
    </div>
    <div class='table_cell'>
      <button (click)="showCancelModal(incomingData)"> Cancel</p>
    </div>
  </div>

А потом в компоненте что-то вроде этого:

showCancelModal(incomingData) {
  // logic for showing modal and retrieving user response
  if( response === 'yes') {
    incomingData.status = 'Cancel in progress';
    yourService.cancel(incomingData)
    .pipe( finally(() => incomingData.status = 'Cancelled') )
     .subscribe();
  }
}