Angular：错误类型错误：无法设置未定义的属性“名称”

Question

我对 Angular 还很陌生。我在 Angular 7 中使用的版本。

所以，我在cars.component.ts 中有一个汽车列表，这些汽车是使用service 从 JSON 文件中获取的。列表中的每辆车都有一个编辑和删除选项，我还有一个添加新车的按钮。

编辑选项有一个更新选项，当我按下它时，我收到错误ERROR TypeError: Cannot set property 'name' of undefined。我错过了一些东西，但不确定到底是什么。

下面是代码。

cars.component.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>

Answer 1

您需要将要保存的索引传递给模板中的 onSave 函数：onSave(index)

但是，由于您已经在 onEdit 函数中设置了 selectedRow，因此会更简单，只需从 onSave 中完全删除参数，然后删除行 this.selectedRow = index。

因为您没有传递参数，所以 index 是 undefined，然后您将不需要的值分配给 this.selectedRow，然后再使用它在 this.car 上查找值。

删除我提到的行应该在您点击保存时保持this.selectedRow 作为有效的索引号。