Rxjs订阅被调用了两次

Question

没有任何类似的问题对我有帮助，所以我的问题是使用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”和“is”2倍。

--按顺序更新，整个代码，它被调用一个按钮点击

--更新--从调用它的位置调用组件的

<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>

Answer 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)间接调用了(ngSubmit)函数，而另一方面，该函数也直接从按钮的单击(click)="entrar()"中调用