Angular 我的数据无法到达component.ts上的函数（角度）

我使用的是google的firebase，我试图将登录页面与注册帐户连接起来，但当我将html页面的输入发送到component.ts时，它不会读取数据或访问firebase 但当我尝试将它初始化为var时，它起了作用

组件

从“@angular/core”导入{Component，OnInit}； 从“../auth.service”导入{AuthService}； 从'@angular/Router'导入{Router}； @组成部分{ 选择器：“应用程序登录”， templateUrl:'./login.component.html'， 样式URL:['./login.component.css'] } 导出类LoginComponent实现OnInit{ //电子邮件：string=email@yahoo.fr'; //password:string='password'；//初始化var的 constructorprivate authService:authService，专用路由器：路由器{} 恩戈尼特{ } seconnectemail，密码 { this.authService.SigninUserMail，password.then => { 提醒“欢迎”+电子邮件； 这个.router.navigate[]； }, 错误=>{ 控制台。日志“连接问题”+错误； 警报“帐户无法访问”； } ; } } component.html

<div class="container">
    <h1>
        log-In
    </h1>
    <form>
      <div class="form-group">
        <label for="name">E-mail :</label>
        <input type="email" class="form-control" required id="email" #email>
      </div>

      <div class="form-group">
        <label for="alterEgo">Password :</label>
        <input type="password" class="form-control" required id="password" #password>
      </div>

      <button type="submit" class="btn btn-success" (click)='seConnecter(email,password)'>Submit</button>

    </form>
</div>

您的问题是Seconnecters缺少正确的参数：

这应该起作用：

 seConnecter(email, password)
 {
 this.authService.signInUser(email,password).then(
  () => {
    alert('Welcome '+ email);
    this.router.navigate(['']);
  },
    (error) => {
       console.log('Connection Problem '+error);
       alert('Account inaccessible');
      }
    );
 }

---

您正在将元素发送到MethodsConnection。按如下方式修改html：

  <button type="submit" class="btn btn-success" (click)='seConnecter(email.value,password.value)'>Submit</button>

您的html：

<form (submit)="seConnecter($event)">
  <div class="form-group">
    <label for="name">E-mail :</label>
    <input type="email" class="form-control" required #email="ngModel" [(ngModel)]="this.model.email" />
  </div>
  <div class="form-group">
    <label for="alterEgo">Password :</label>
    <input type="text" class="form-control" required #password="ngModel" [(ngModel)]="this.model.password" />
  </div>
  <div class="form-group">
    <input type="submit" value="submit" />
  </div>
</form>

另一种方法是，根据您的问题，将button元素的类型修改为button，而不是submit：

<form>
  <div class="form-group">
    <label for="name">E-mail :</label>
    <input type="email" class="form-control" required id="email" #email>
  </div>

  <div class="form-group">
    <label for="alterEgo">Password :</label>
    <input type="password" class="form-control" required id="password" #password>
  </div>
  <button type="button" class="btn btn-success" (click)='seConnecter(email.value,password.value)'>Submit</button>
</form>

---

如果你选择模板形式，你可以得到形式值，而无需在组件级别创建任何属性，我认为这就是所有模板形式的全部内容，否则我们使用被动形式

模板

登录 电邮： 密码： 提交 表单控件需要放入ngModel指令并设置名称

您可以禁用“提交”按钮，直到表单在验证设置的基础上有效

提交 组成部分

SeconnectFormValue{ const{email，password}=formValue； .... }

---

演示很抱歉，我在发布问题时忘记添加它，但即使使用参数，它也无法工作。实际上，您只需将email.value和password.value放置到位，作为在此处过度工程的双向绑定。同样的问题，它无法到达组件上的函数。t是否尝试删除按钮上的type=submit？噢，哇：type=按钮我下一个有根据的猜测。即使我这样写，它也是一样的

  seConnecter(event: Event) {
    event.preventDefault();
    this.authService.signInUser(this.model.email, this.model.password).then(
      () => {
        alert('Welcome ' + this.model.email);
        this.router.navigate(['']);
      },
      (error) => {
        console.log('Connection Problem ' + error);
        alert('Account inaccessible');
      }
    );
  }

<form>
  <div class="form-group">
    <label for="name">E-mail :</label>
    <input type="email" class="form-control" required id="email" #email>
  </div>

  <div class="form-group">
    <label for="alterEgo">Password :</label>
    <input type="password" class="form-control" required id="password" #password>
  </div>
  <button type="button" class="btn btn-success" (click)='seConnecter(email.value,password.value)'>Submit</button>
</form>

  seConnecter(email: string,password: string)
  { 
     ...
  }