Угловая форма выдает ошибку, говоря "_co.sevice не определено"

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. Это для одного. Теперь, если вы посмотрите на ошибку, вы также заметите, что в шаблоне вы указали сервис с ошибкой, вместо этого вы написали sevice. Я думаю, что это должно сработать, если вы исправите эти две вещи.

Как уже упоминалось в комментариях, я также не думаю, что это хорошая практика - показывать сервис так же. Вам необходимо собрать данные (адрес электронной почты, пароль и т. Д.) В компоненте, а затем отправить их в службу с событием щелчка или что-то в этом роде.