Rxjs 订阅被调用了两次

Question

None 个类似的问题帮助了我，所以我的问题来了我正在使用 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>

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

Rxjs 订阅被调用了两次

Rxjs Subscribe been called twice

rxjs

typescript

rxjs5

angular