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”和“done”2x。

- 更新 - 按顺序排列整个代码，它在一个按钮内点击

- 更新 - 从

调用它的组件

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

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

Rxjs订阅已被调用两次

1 个答案: