Свойство "#" не существует при ошибке типа "#"

Question

Я слежу за онлайн-курсом по применению стека MEAN. Я получаю следующие ошибки и не могу понять, как это исправить.

1.) Ниже приведен код из моего employee.component.ts file:

import { Component, OnInit } from '@angular/core';


import { EmployeeService } from '../shared/employee.service'

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css'],
  providers: [EmployeeService]
})
export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
  }

}

2.) Ниже приведен код моего сотрудника employee.ponent. html file:

<div class="row">
    <div class="col s12">
      <div class="card">
        <div class="card-content white-text">
          <div class="row">
            <div class="col sS">
              <form #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
                <input type="hidden" name="_id" #_id="ngModel" [(ngModel)]="employeeService.selectedEmployee._id">
                  <div class="row">
                      <div class="input-field col s12">
                        <input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.name" placeholder="Enter full name">
                        <label>Name :
                          <label class="red-text">*</label>
                      </label>
                      </div>
                  </div>
                 <div class="row">
                      <div class="input-field col s12">
                        <input type="text" name="position" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.position" placeholder="Enter Position">
                        <label>Position :</label>
                      </div>
                  </div>
                  <div class="row">`enter code here`
                       <div class="input-field col s12">
                         <input type="text" name="office" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.office" placeholder="Enter Office">
                         <label>Position :</label>
                       </div>
                   </div>
                   <div class="row">
                        <div class="input-field col s12">
                          <input type="text" name="salary" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.salary" placeholder="Enter salary">
                          <label>Position :</label>
                        </div>
                    </div>
              </form>

            </div>
            <div class="col s7">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Я новичок в этом, поэтому у меня трудное время исправление этой ошибки Я был бы очень признателен, если бы кто-то смог пролить свет на это. Спасибо.

Answer 1

Все ошибки ле git. Давайте посмотрим на код вашего компонента:

export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
  }

}

Прежде всего, ваш компонент не имеет метода onSubmit , который ваш шаблон пытается использовать (ngSubmit)="onSubmit(employeeForm)"

Более того множественное место в шаблоне, к которому вы обращаетесь, employeeService переменная, сделайте ее доступной c вместо приватной, если вы хотите использовать в шаблоне как: constructor(public employeeService: EmployeeService) { }

Answer 2

Попробуйте следующим образом:

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../shared/employee.service'

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

constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
  };
  onSubmit(employeeForm: NgForm) {
    if (employeeForm.value.$key == null) {
     this.employeeService.insertEmployee(employeeForm.value);
     this.tostr.success('registration Successfully', 'Employee Registered')
     employeeForm.reset();
    }
   } 
  }

HTML

<div class="row">
<div class="col s12">
  <div class="card">
    <div class="card-content white-text">
      <div class="row">
        <div class="col sS">
          <form #employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
            <input type="hidden" name="_id" #_id="ngModel" [(ngModel)]="employeeService.selectedEmployee._id">
              <div class="row">
                  <div class="input-field col s12">
                    <input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee.name" placeholder="Enter full name">
                    <label>Name :
                      <label class="red-text">*</label>
                  </label>
                  </div>
              </div>
             <div class="row">
                  <div class="input-field col s12">
                    <input type="text" name="position" #position="ngModel" [(ngModel)]="employeeService.selectedEmployee.position" placeholder="Enter Position">
                    <label>Position :</label>
                  </div>
              </div>
              <div class="row">`enter code here`
                   <div class="input-field col s12">
                     <input type="text" name="office" #office="ngModel" [(ngModel)]="employeeService.selectedEmployee.office" placeholder="Enter Office">
                     <label>Position :</label>
                   </div>
               </div>
               <div class="row">
                    <div class="input-field col s12">
                      <input type="text" name="salary" #salary="ngModel" [(ngModel)]="employeeService.selectedEmployee.salary" placeholder="Enter salary">
                      <label>Position :</label>
                    </div>
                </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>