使用 angular6 动态更新 table 单元格值

Question

我正在使用 angular 6 应用程序，在 HTML 模板中我有一些代码如下，仅显示数组的 table 单元格部分，还有table 是使用 div 构建的。

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

这里请注意，"data"是一个数组（*ngFor），在行数据中使用，table中有多个数据。

现在我遇到的情况是 table 行内有一个取消特定订单的按钮，当用户单击时，弹出窗口 up/modal 要求用户确认，如果用户选择 'Yes' 它会在它到达服务之前暂时将状态字段值更改为 "cancellation is in process"，一旦客户成功响应，它会将站点更改为 "cancelled".

我真的不确定如何在此处的 table 单元格中取消，如果有人可以对此提供见解，请这样做。

谢谢

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();
  }
}

使用 angular6 动态更新 table 单元格值

Update table cell value dynamically using angular6

html

css

angular6