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

Question

当我使用子对象时，使用 Angular 2 的 Primeng 数据表有问题。当我将可编辑参数设置为 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 为真，子对象的值就会消失：

可编辑表：

其他人有这个问题吗？我不知道这是primeng中的错误还是我错过了什么。

谢谢 ！:)

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