Paramètre modifiable dans DataTable de PrimeNg dans Angular2 ne fonctionne pas avec le sous-objet

Question

J'ai un problème avec le DataTable de primeng avec Angular 2 lorsque j'utilise un sous-objet. Lorsque je mets le paramètre modifiable à true. La valeur disparaît.

Ceci est mon objet:

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

Ceci est mon élément:

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'} 
     ]; 
    } 
} 

Et ceci est mon 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> 

Si modifiable est faux, je peux voir la valeur

Non modifiable ta ble:

Mais si modifiable est vrai, la valeur de l'objet sous disparaître:

Table éditable:

Quelqu'un d'autre a ce problème? Je ne sais pas si c'est un bug de primeng ou si quelque chose me manque.

Merci! :)

Answer 1

Avez-vous essayé d'ajouter des modèles?

<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> 

Veuillez également ajouter un attribut modifiable sur <p-datatable>.

Plus sur Templating #here