javascript - Angular 5-无法双向绑定(bind)数据

我觉得这可能是一个基本问题，但经过一周的研究，我无法弄清自己到底在搞什么。我承认我不太喜欢Angular（2 ++）。

我正在尝试创建一个简单的CRUD系统。我在数据表的每一行上创建了一个按钮，并为每行添加了单击事件。此事件将在我的服务上调用一个函数，该函数会将我重定向到表单，并使用其数据填充var CurrentIncident。到目前为止，一切都很顺利，我可以从控制台看到预期的数据：

返回的示例数据：

{ description: "This is a test", data1: "Another test", data2: "Another test"}

下一步是使用NgModel在表单上设置2种方式的绑定。所以我在输入中添加了这个。

<input placeholder="Description" value="" [(ngModel)]="CurrentIncident.Description">

但它返回错误：


  错误TypeError：无法读取未定义的属性“描述”


有人知道我在搞砸吗？

按钮事件：

<button mat-mini-fab color="accent" (click)="CrudService.Edit_Incident(this.params.data)">
    <mat-icon aria-label="Edit">description</mat-icon>
</button>

服务：

import { Injectable } from '@angular/core';
import { Incident_Model } from '../incident_model';
import {Router} from "@angular/router";

@Injectable()
export class CrudService {

    constructor(private router: Router) {}

    public CurrentIncident: Incident_Model[];

    public Edit_Incident(data) {
        this.CurrentIncident = data;
        this.router.navigate(['form'])
        console.log( this.CurrentIncident )
    }
}

形成：

<mat-form-field fxFlex="40">
    <input matInput placeholder="Description" value="">
</mat-form-field>

最佳答案

在您的CrudService类中，尽管CurrentIncident在构造函数中未指定任何值，但它应该是一个数组。

这就是为什么在您的模板中

[(ngModel)]="CurrentIncident.Description"

CurrentIncident最初是undefined。

最重要的是，假设CurrentIncident是一个数组，它将没有Description属性。给定示例数据，您可能会使用类似

[(ngModel)]="CurrentIncident[0].description"

但是仅在CurrentIncident初始化之后。

为了避免在初始化CurrentIncident之前出错，可以使用*ngIf

<input placeholder="Description" value="" [(ngModel)]="CurrentIncident[0].description" *ngIf="CurrentIncident">