Question

我正在尝试从角度格式将数据发送到firebase项目，在此我遇到了这个特殊错误。

这是包含表单

的组件的html部分

<form #form="ngForm" autocomplete="off"> 

              <div class="form-row">
                <div class="input-group form-group-no-border col-lg-6">
                  <input type="text" name=FirstName #FirstName="ngModel" [(ngModel)]="sevice.formData.FirstName" class="form-control" placeholder="First Name..." required />
                </div>
                <div class="input-group form-group-no-border input-lg col-lg-6">
                  <input type="text" name=LastName #LastName="ngModel" [(ngModel)]="sevice.formData.LastName" class="form-control" placeholder="Last Name..." required />
                </div>
              </div>

              <div class="input-group form-group-no-border input-lg">
                <input type="text" name=Email #Email="ngModel" [(ngModel)]="sevice.formData.Email" class="form-control" placeholder="Email Address..." required />
              </div>
              <div class="input-group form-group-no-border input-lg">
                  <input type="password" name=Password #Password="ngModel" [(ngModel)]="sevice.formData.Password" placeholder="Password..." class="form-control" required />
              </div>
              <div class="input-group form-group-no-border input-lg">
                <input type="password" placeholder="Re-Enter Password..." class="form-control" required />
              </div>

              <div class="footer text-center">
                  <button type="submit" class="btn btn-block btn-round btn-lg btn-info"> Get Started</button>
              </div>  

            </form>

这是该组件的打字稿文件

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from '../Shared/authentication.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {

  constructor(private service : AuthenticationService) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form? : NgForm){
    if(form!=null){
      form.resetForm();
      this.service.formData={
        FirstName : '',
        LastName : '', 
        Email : '',
        Password : '',
      }
    }
  }

}

然后是服务代码

import { Injectable } from '@angular/core';
import { Authentication } from './authentication.model'; 

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  formData :  Authentication;

  constructor() { }
}

最后是服务模型类

export class Authentication {
    FirstName : string ;
    LastName : String ;
    Email : string ;
    Password : string ;
}

很抱歉，如果不清楚。如果有人可以帮助我解决这个问题，那就太好了。

Answer 1

如果您查看组件的构造函数，则将服务设置为私有变量，因此除非将其设置为public，否则将无法从模板访问它。那是一个。现在，如果您查看错误，您还将注意到模板中的服务拼写错误，而是编写了服务。我认为，如果您修复了这两件事，它应该会起作用。

正如评论中提到的那样，我也不认为公开这样的服务是一种好习惯。您应该在组件中收集数据（电子邮件，密码等），然后通过单击事件或类似的方式将其发送到服务。

角度形式给出错误，提示“ _co.sevice未定义”

1 个答案: