Question

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

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

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

1 个答案: