RxJS Subscribe被调用两次问题求助（附Ionic完整代码）

嗨，我一眼就发现问题所在啦！你遇到的subscribe被执行两次的情况，根源完全在模板代码的事件绑定上——你的提交按钮同时绑定了(ngSubmit)和(click)两个事件，而且都指向了entrar()方法。当你点击按钮时，这两个事件会先后触发，直接导致entrar()被调用两次，里面的subscribe自然也就跟着执行两次了。

给你两个简单的解决方案：

• 方案一（推荐）：移除按钮上的(click)绑定
  你的按钮是type="submit"，放在<form>标签内部，点击它本来就会自动触发表单的ngSubmit事件，完全不需要额外绑定click事件。修改后的按钮代码如下：

  <button type="submit" color="branco" style="height:50px" ion-button block outline round>Entrar</button>
  

• 方案二（仅特殊场景使用）：移除表单的ngSubmit绑定
  如果你因为某些需求非要保留按钮的click事件，那可以把表单上的(ngSubmit)="entrar()"去掉，让提交逻辑完全由按钮的click事件处理。修改后的表单标签：

  <form [formGroup]="form">
  

修改完成后，你再点击按钮测试一下，entrar()只会被调用一次，subscribe也就只会执行一次，控制台不会再重复打印true/false和done啦。如果还不确定，你可以在entrar()方法开头加一句console.log('entrar方法被调用')，就能直观看到调用次数的变化。

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