Angular2中PrimeNg的DataTable中的可编辑参数不适用于子对象

Question

当我使用子对象时，我对使用Angular 2的primeng的DataTable有问题。 当我将editable参数设置为true时。价值消失了。

这是我的目标：

export class Car {
      year: number;
      type: {`enter code here`
        brand: string;
        model: string;
      };
      color: string;
  }

这是我的组成部分：

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

import { CARS } from './mock-cars';
import { Car } from './cars';


@Component({
  moduleId: module.id,
  selector: 'app-cars',
  templateUrl: 'cars.component.html'
})
export class CarComponent implements OnInit {
  cars: Car[] = [];
  cols: any[];

  constructor() { }

  ngOnInit(): void {
    this.cars = CARS;

    this.cols = [
            {field: 'year', header: 'Year'},
            {field: 'type.brand', header: 'Brand'},
            {field: 'type.model', header: 'Model'},
            {field: 'color', header: 'Color'}
        ];
  }
}

这是我的HTML：

    <h3>Cars</h3>
<div class="grid grid-pad">
  <p-dataTable [value]="cars">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [editable]=true></p-column>
  </p-dataTable>

  <p-dataTable [value]="cars">
    <p-column [editable]=true field="year" header="Vin"></p-column>
    <p-column [editable]=true field="type.brand" header="Year"></p-column>
    <p-column [editable]=true field="type.model" header="Brand"></p-column>
    <p-column [editable]=true contenteditable=""field="color" header="Color"></p-column>
</p-dataTable>
</div>

如果editable为false，我可以看到值

不可编辑的表格：

但如果editable为true，则子对象的值消失：

可编辑的表格：

有人有这个问题吗？ 我不知道它是不是错误的错误，或者我是否遗漏了什么。

谢谢！ ：）

Answer 1

您是否尝试过添加模板？

<p-column [editable]=true field="type" header="Year">
  <template let-col let-car="rowData" pTemplate="editor">
    <input type="text" pInputText [(ngModel)]="car[col.field]?.brand" [class]="'form-control'" required="true" placeholder="">
  </template>
</p-column>

另请在<p-datatable>上添加可编辑属性。

有关模板#here

的更多信息