角度:错误类型错误:无法设置未定义的属性“name”

我对棱角比较陌生。我在角度7中使用的版本。

所以,我有一个汽车清单 cars.component.ts 从JSON文件中使用 service . 列表中的每辆车都有一个编辑和删除选项,我还有一个按钮可以添加一辆新车。

编辑选项有一个更新选项,当我按下该选项时,会收到一个错误 ERROR TypeError: Cannot set property 'name' of undefined . 我遗漏了一些东西,但不确定具体是什么。

下面是代码。

汽车.部件.ts

import { Component, OnInit } from '@angular/core';
import { CarService } from '../service/car.service';
import { ICars } from '../cars';

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

  public cars = [];

  registeredCars = [];
  selectedRow: number;
  public car: ICars;
  showNew: Boolean = false;
  submitType: string;
  loading: Boolean = false;

  constructor(private _carService: CarService) { }

  ngOnInit() {
    this.loading = true;
    //console.log('loading', this.loading);
    this._carService.fetchData().subscribe(data => this.cars = data);
  }

  onEdit(index: number) {
    this.selectedRow = index;
    this.car = new ICars;
    this.car = Object.assign({}, this.cars[this.selectedRow]);
    this.showNew = true;
    this.submitType = 'Update';
  }

  onDelete(index: number) {
    this.cars.splice(index, 1);
  }

  onNew() {
    this.car = new ICars;
    this.submitType = 'Save';
    this.showNew = true;
  }

  onSave(index: number) {
    this.selectedRow = index;
    if (this.submitType === 'Save' ) {
      this.cars.push(this.car);
    } else {
      console.log('this car', this.car.name);
      this.car[this.selectedRow].name = this.car.name;
      this.car[this.selectedRow].year = this.car.year;
    }
    this.showNew = false;
  }

  onCancel() {
    this.showNew = false;
  }
}

这是部分代码

<div class="carsList">
  <table *ngIf="loading" class="table table-striped">
    <thead >
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Year</th>
      </tr>
    </thead>
    <tbody >
        <tr *ngFor="let car of cars; let i = index">
            <td>{{ i+1 }}</td>
            <td>{{car.name | uppercase}}</td>
            <td>{{car.year}}</td>
            <td>
                <button type="button" class="btn btn-info" routerLink="/car-details/{{ i }}" placement="top" ngbTooltip="View details"><fa name='eye'></fa></button>
              </td>
            <td>
              <button type="button" class="btn btn-secondary" (click)="onEdit(i)" placement="top" ngbTooltip="Edit details"><fa name='edit'></fa></button>
            </td>
            <td>
              <button type="button" class="btn btn-danger" (click)="onDelete(i)" placement="top" ngbTooltip="Delete entry"><fa name='trash'></fa></button>
            </td>
        </tr>
    </tbody>
  </table>
  <div class="text-right">
      <button type="submit" class="btn btn-primary" (click)="onNew()">New</button>
  </div>
</div>
<!-- Edit/Add User  -->

<div class="regentry" *ngIf="showNew">
    <h2 class="text-center">{{ submitType === 'Save'? 'Register New Car' : 'Edit Car' }}</h2>
    <br>
    <form (ngSubmit)="onSave()">
      <div class="form-group row">
        <label for="name-input" class="col-2 col-form-label">Car Name</label>
        <div class="col-10">
          <input class="form-control" type="text" [(ngModel)]="car.name" name="name" required>
        </div>
      </div>
      <div class="form-group row">
        <label for="year-input" class="col-2 col-form-label">Year</label>
        <div class="col-10">
          <input class="form-control" type="text" [(ngModel)]="car.year" name="year" required>
        </div>
      </div>
      <button type="submit" class="btn btn-success">{{submitType}}</button>&nbsp;
      <button type="submit" class="btn btn-primary" (click)="onCancel()">Cancel</button>
    </form>
  </div>

  <div *ngIf="!loading"><img class="loading" src="../../assets/loading.gif" alt="loading" srcset=""></div>