类型“#”错误中不存在属性“#”

Question

我正在学习关于 MEAN 堆栈应用程序的在线课程。 我收到以下错误，我无法弄清楚如何修复它。

1.) 下面是我的employee.component.ts 文件中的代码：

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.component.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" #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

尝试以下方式：

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>

Answer 2

所有错误都是合法的。 让我们看看你的组件代码：

export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
  }

}

首先，您的组件没有您的模板尝试使用的onSubmit方法(ngSubmit)="onSubmit(employeeForm)"

此外，模板中的多个地方您正在访问employeeService变量，如果您想在模板中使用 if 将其设为 public 而不是私有的： constructor(public employeeService: EmployeeService) { }