Angular2删除弹窗密码残留问题解决方案求助

嘿，这个问题很常见，根源在于你所有的删除模态框都绑定了同一个password变量！当你在第一个弹窗输入密码后，这个变量的值会一直保留，打开另一个弹窗时自然就显示之前输入的内容了。下面给你几个靠谱的解决方案：

方案1：实现打开弹窗时清空密码的方法 #

你已经在删除按钮上绑定了(click)="clear()"，但看起来没实现这个方法。在你的TS文件里添加上：

clear(): void {
  this.password = '';
}

这样每次点击删除按钮打开新弹窗时，都会先把password变量清空，确保密码框是空白的。

方案2：关闭模态框时自动清空密码 #

还要考虑用户可能通过点击弹窗的关闭按钮（×）或者点击空白处关闭弹窗，这时候也要清空密码。给模态框添加Bootstrap的hidden.bs.modal事件绑定：

修改你的模态框HTML代码：

<div class="modal fade modal-size-small delete-modal" id="delete_modal_{{source_info.source.name}}" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true" (hidden.bs.modal)="clear()">

这样不管用户怎么关闭模态框，都会触发clear()方法清空密码。

方案3：优化删除方法，执行后强制清空密码 #

在你的deleteSource方法里，不管密码验证成功还是失败，都应该清空密码变量。现在你只在密码错误时清空了，成功时没处理，补上这一步：

deleteSource(name, password) {
  const headers = new Headers({'Authorization': localStorage.getItem('Token'), 'Content-Type': 'application/json'});
  const options = new RequestOptions({headers: headers});
  console.log(name, password);
  $('.delete-modal').modal('hide');
  
  // 先清空密码，避免残留
  this.password = '';

  if (password === localStorage.getItem('Password')) {
    this.service.delete(options, services.data_source_service + name).subscribe((response) => {
      this.message.handle('icmn-checkmark', '', 'Data source has been deleted', 'success');
      this.getSources();
    }, (err) => {
      this.message.errorHandler(err);
    })
  } else {
    $.notify({
      message: 'Password not valid for delete operation!'
    }, {
      type: 'warning'
    })
  }
}

为什么这样有效？ #

因为所有的删除模态框都共用同一个password双向绑定变量，只要在打开新弹窗前、弹窗关闭时、删除操作完成后这几个时机清空变量，就能保证每次打开弹窗时密码框都是空白的啦！

内容的提问来源于stack exchange，提问作者SARANYA