Angular 创建表单后，然后提交，它显示无法读取属性'；名称'；角度6中未定义的

createemployee.component.html

<form #employeeForm="ngForm" (ngSubmit)="onSaveEmp(employeeForm)" >
<div class="panel-body">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" placeholder="Enter Name" class="form-control" 
        name="name" ngModel required
        #fname="ngModel"
        >
</div>
<div class="panel-footer">
      <button  type="submit" class="btn btn-primary" 
      [disabled]="!employeeForm.valid" (click)="saveEmployee()"
      >Save</button>
    </div>
</div>
</form>

<div class="panel panel-primary" *ngFor="let employee of employees"

>
    <div class="panel-heading">
        <div class="panel-title">
            <h4>{{ employee.name }}</h4>
        </div>
    </div>
</div>

employee.service.ts

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

import { Employee } from '../employee.model';
import { EmployeeService } from '../employee.service';
import { Router } from '../../../../node_modules/@angular/router';




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

  @Input() employee: Employee;


    photoPreview = false;

  constructor(private empService: EmployeeService,
              private router: Router
  ) { }

  ngOnInit() {

  }

  onSaveEmp(empForm: NgForm) {
    //console.log(empForm.value);
  }

  saveEmployee(employee: Employee) {
    this.empService.save(employee);
    'The Array of Form' + console.log(employee);
  }

  onShowPreview() {
    this.photoPreview = !this.photoPreview;
  }
}

import { Injectable, OnInit } from "@angular/core";

import { Employee } from "./employee.model";

@Injectable({
  providedIn: 'root',
})

export class EmployeeService implements OnInit {

    private employees: Employee[] = [
        new Employee('John', 'Male', 'john@gmail.com', 1234567890, 'Phone', new Date('06/10/1991'),'IT', true, 'assets/images/male.png'),
        new Employee('sunria', 'Female', 'sunria@gmail.com', 9876543211, 'Phone', new Date('06/30/1991'),'HR', true, 'assets/images/female.png'),
        new Employee('Sandy', 'Female', 'sandy@gmail.com', 12344509876, 'Phone', new Date('02/28/2002'),'Manager', true, 'assets/images/female2.png')
    ]

    constructor() {

    }

    ngOnInit() {}

    getEmployees() {
        return this.employees.slice();
    }

    save(employee: Employee) {
        this.employees.push(employee);
    }

}

employee.component.html

<form #employeeForm="ngForm" (ngSubmit)="onSaveEmp(employeeForm)" >
<div class="panel-body">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" placeholder="Enter Name" class="form-control" 
        name="name" ngModel required
        #fname="ngModel"
        >
</div>
<div class="panel-footer">
      <button  type="submit" class="btn btn-primary" 
      [disabled]="!employeeForm.valid" (click)="saveEmployee()"
      >Save</button>
    </div>
</div>
</form>

<div class="panel panel-primary" *ngFor="let employee of employees"

>
    <div class="panel-heading">
        <div class="panel-title">
            <h4>{{ employee.name }}</h4>
        </div>
    </div>
</div>

{{employee.name}

在我在employees数组中提交表单后，我有了正常的createEmployees.component.html表单显示空创建没有添加employees[]。空的详细信息将添加到employees数组中。我怎样才能解决这个问题就像CRUD在创建新员工时遇到了这样的错误

错误类型错误：无法读取未定义的属性“name”

---

并创建一个未定义的数组。

您需要使用安全导航操作符

？

<div class="panel-heading">
        <div class="panel-title">
            <h4>{{ employee?.name }}</h4>
        </div>
</div>

{{employee？.name}

你能发布你的HTMLY吗？

我只发布了一个名字字段，因为我的表单非常大，包含10个字段。考虑到将长的
。/../../../../node\u modules/
路径更改为
createemployee.component.ts中的
@angular/router
，并且在使用双引号/单引号时保持一致。同时考虑与压痕尺寸一致！好的，但未定义的null:1 GET 404（未找到）如果我使用安全导航操作符，那么它将再次显示下一个字段的错误，您需要用于所有字段Sok，但它将添加空字段。问题在于您的表单，我没有看到添加部分的模板。您可以将模板发布到调用save的位置吗