PrimeNG Datatable - deaktivieren Sie die Bearbeitung von Zellen für bestimmte Zeilen

Question

Bitte haben Sie Geduld mit der langen Post.

Ich habe eine bearbeitbare Datentabelle mit PrimeNG und Angular2, ähnlich mit ihren example:

<p-dataTable [value]="cars" [editable]="true"> 
    <p-column field="vin" header="Vin" [editable]="true"></p-column> 
    <p-column field="year" header="Year" [editable]="true"></p-column> 
    <p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}"> 
     <template let-col let-car="rowData" pTemplate="editor"> 
      <p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown> 
     </template> 
    </p-column> 
    <p-column field="color" header="Color" [editable]="true"></p-column> 
    <p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }"> 
     <template let-col let-car="rowData" pTemplate="body"> 
      {{car[col.field]|date }} 
     </template> 
     <template let-col let-car="rowData" pTemplate="editor"> 
      <p-calendar [(ngModel)]="car[col.field]"></p-calendar> 
     </template> 
    </p-column> 
</p-dataTable> 

* Meine Tabelle alle Spalten mit Vorlagen hat, weil ich eine benutzerdefinierte CSS festlegen müssen, wenn die Zelle Fehler hat.

Nehmen wir an, wir haben das Feld Preis.

<p-column field="price" header="Car Price"> 
    <template let-col let-car="rowData" pTemplate="body"> 
     <span [ngClass]="{'error':car['hasError']}">{{car[col.field] }}</span> 
    </template> 
</p-column> 

Ich brauche für diese Spalte [editierbare] Eigenschaft setzen, aber das muss auch Zeile unabhängig sein (für jede Zelle in der Price Spalte), z.B. Eine Price Zelle kann nur für Autos editiert werden, die Audi als Brand ausgewählt haben.

Ich habe versucht, contentEditable={customCondition} hinzufügen und es funktioniert nicht, auch die [editable] Eigenschaft deaktiviert die Bearbeitung der gesamten Spalte, nicht auf der spezifischen Zelle.

Jede Hilfe oder Vorschläge werden sehr geschätzt.

Answer 1

Ich nehme an, Sie möchten steuern, wenn eine Zelle basierend auf einer anderen Bedingung bearbeitet werden kann. Ich hatte ein ähnliches Problem, das ich lösen konnte, indem ich kontrolliere, wenn das Steuerelement in der Vorlage editierbar wird Das Dropdown wird nur bearbeitet, wenn die Eigenschaft "editierbar" auf True einer Zeile festgelegt ist. Hoffe, das hilft ...

Hier mein Beispiel ist -

<p-column [style]="{'width':'200px','overflow':'visible'}" [editable]="true" field="default_policy" header="Default Policy">      
       <template let-col let-car="rowData" pTemplate="body"> 
        {{car[col.field]}} 
       </template> 
       <template let-col let-car="rowData" pTemplate="editor"> 
        <p-dropdown [disabled]="!car.editable" [(ngModel)] = "car.default_policy" [options]="policyEditList" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown> 
       </template>      
      </p-column> 

Answer 2

ich einverstanden bin mit dem, was karthiks3000 erklärt. Wenn Sie jedoch keinen Effekt sehen möchten (das Dropdown-Menü mit deaktivierter Schaltfläche, wenn Sie auf die Zelle klicken), können Sie * ngIf verwenden, um die Editor-Vorlage basierend auf dem Wert zu entfernen.

Zum Beispiel:

<p-column [style]="{'width':'200px','overflow':'visible'}" [editable]="true" field="default_policy" header="Default Policy">      
       <template let-col let-car="rowData" pTemplate="body"> 
        {{car[col.field]}} 
       </template> 
       <template let-col let-car="rowData" pTemplate="editor"> 
        <p-dropdown *ngIf="!car.editable" [(ngModel)] = "car.default_policy" [options]="policyEditList" [autoWidth]="false" [style]="{'width':'100%'}"></p-dropdown> 
       </template>      
      </p-column