Rxjs 订阅被调用了两次答案

【问题标题】：Rxjs Subscribe been called twiceRxjs 订阅被调用了两次
【发布时间】：2018-01-28 12:50:40
【问题描述】：

没有类似的问题对我有帮助，所以我的问题来了我正在使用 rxjs 订阅方法，但它被触发了两次，我希望它被调用一次。这是我的代码：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { CadastrarUsuarioPage } from '../cadastrar-usuario/cadastrar-usuario';
import { FirebaseProvider} from '../../providers/firebase/firebase';
import { AngularFireOfflineDatabase, AfoListObservable, AfoObjectObservable } from 'angularfire2-offline/database';
import { HomePage } from '../home/home';
@Component({  
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  private form: FormGroup;
  private usuario: string;
  private senha: string;
  public afoList: AfoListObservable<any[]>;  
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private statusBar: StatusBar,
              private formBuilder: FormBuilder,
              private afoDatabase: AngularFireOfflineDatabase
            ) {
                this.form = this.formBuilder.group({
                  usuario: ['', Validators.required],
                  senha: ['', Validators.required]
                });
  }

  ionViewDidLoad()
  {
    this.statusBar.hide(); 
  }

  entrar()
  {
    let usuario_senha = this.usuario + "_" + this.senha;
    this.afoDatabase.list('usuarios/', {query: {
      orderByChild: 'usuario_senha',
      equalTo: usuario_senha
    }}).take(1).subscribe((x) => {
      if(x.length == 1)
      {
        console.log("true");
      }
      else
      {
        console.log("false");
    }},
    error =>{
        console.error("Error in subscribe: ", error.message);
    },
    () =>{
      console.log("done");
      });
  }

  abrirCadastrarUsuario()
  {
    this.navCtrl.push(CadastrarUsuarioPage);
  }
}

每次调用它都会打印“false”/“true”和“done”两次。

--更新-- 按照命令，整个代码，它是在一个按钮点击里面调用的

-- 更新-- 调用它的组件

<ion-content padding class="content">
    <ion-grid>
      <form [formGroup]="form" (ngSubmit)="entrar()">
        <ion-row style="height:50px;margin-top:30px" align-items-center>
          <ion-col col-12 text-center class="login-title">
            Login Offline
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-12>
            <ion-list>
              <ion-item class="no-background border-top-transparent">
                <ion-label color="branco" floating>Usuário</ion-label>
                <ion-input type="text" [(ngModel)]="usuario" formControlName="usuario"></ion-input>
              </ion-item>
            </ion-list>
            <ion-list>
              <ion-item class="no-background border-top-transparent">
                <ion-label color="branco" floating>Senha</ion-label>
                <ion-input type="password" [(ngModel)]="senha" formControlName="senha"></ion-input>
              </ion-item>
            </ion-list>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-12>
            <button type="submit" color="branco" style="height:50px" (click)="entrar()" ion-button block outline round>Entrar</button>
          </ion-col>
        </ion-row>
      </form>
    </ion-grid>
    <div class="cadastrar"><p class="cadastrar-texto" (click)="abrirCadastrarUsuario()">Cadastre-se</p></div>
</ion-content>

【问题讨论】：

这段代码在哪里？谁/什么叫它？
你能分享整个组件，以便我们可以看到我在哪里/如何调用这段代码吗？
按顺序更新！
entrar() 在任何地方都没有被调用...而且我感觉它在某些*ngIf 或直接在{{ entrar() }} 中被调用
好的。现在只需在您的模板上使用Ctrl-F entrar，就会看到它被调用了两次：一次是在提交按钮的（单击）中，一次是在表单的（ngSubmit）中。

标签： angular typescript rxjs rxjs5

【解决方案1】：

你的entrar()函数被调用了两次，因为ngSubmit在这里：

<form [formGroup]="form" (ngSubmit)="entrar()">

和按钮的类型在这里提交：

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

基本上在按钮的单击事件中，您提交的表单从(ngSubmit) 间接调用entrat() 函数，而另一方面，此函数也直接从按钮的单击(click)="entrar()" 调用

【讨论】：