Question

我是Angular的新手。我正在创建一个Web应用程序。在开发它时我遇到了这样的问题。我创建了一个这样的表单。

<div class="row">
      <div class="col s12 m6">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <div class="row">
              <div class="col s5">
                <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" required>
                      <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 your position">
                      <label>Position :</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s12">
                      <input type="text" name="office" #name="ngModel" [(ngModel)]="employeeService.selectedEmployee?.office" placeholder="Enter office">
                      <label>Office :</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>Salary :</label>
                    </div>
                  </div>
                  <div class="row">
                    <div class="input-field col s12">
                      <button class="btn btn-custom right" type="button" (click)="resetForm(employeeForm)">Reset</button>
                      <button class="btn btn-custom right" type="submit" [disabled]="employeeForm.valid">Submit</button>
                    </div>
                  </div>

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

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

当它运行时，在控制台中给出了这样的错误。

Error report

这是我的app.module.ts文件。

这是我的employee.component.ts文件。

这是我的员工班。 employee.ts

这是我的employee.service文件。

这是我的整个component.ts文件

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

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

declare var M: any;

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

  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
    this.resetForm();
    this.refreshEmployeeList();
  }

  resetForm(form?: NgForm) {
    if (form) {
      form.reset();
      this.employeeService.selectedEmployee = {
        _id: '',
        name: '',
        position: '',
        office: '',
        salary: null
      };
    }
  }

  onSubmit(form: NgForm) {
    if (form.value._id === '') {
      this.employeeService.postEmployee(form.value).subscribe((res) => {
        this.resetForm(form);
        M.toast({ html: 'Saved successfully', classes: 'rounded' });
      });
    }
  }
  refreshEmployeeList() {
    this.employeeService.getEmployeeList().subscribe(function (res) {
     console.log(res as Employee[]) ;
    });
  }
}

我怎样才能克服这个问题？我在网上搜索这个和StackOverflow问题。但是我无法找到问题的准确答案。谢谢

Answer 1

如果从后端获取值，请使用安全操作（？）。

[(ngModel)] ="employeeService?.selectedEmployee?._id"

角形无法正常工作

1 个答案: