PrimeNG Datatable - 特定の行のセル編集を無効にする

Question

長い投稿には忍耐を持ってください。

私は彼らのexampleと同様のPrimeNGとAngular2を、使用して編集可能なデータテーブルがあります。

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

を、私は、セルにエラーがある場合は、カスタムCSSを設定する必要があるため*私のテーブルには、テンプレートと、すべての列があります。

Priceフィールドがあるとします。私は、例えば、この列の[編集可能]プロパティを設定するが、これはまた、（Price列の各セルのために）独立した行する必要がある必要がある

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

Priceセルは、AudiがBrandとして選択されている車に対してのみ編集可能です。

contentEditable={customCondition}を追加しようとしましたが、機能しません。[editable]プロパティは、特定のセルではなく、列全体の編集を無効にします。

ご意見やご提案は高く評価されます。

Answer 1

他の条件に基づいてセルが編集可能になる時期を制御したいとします。私はテンプレート内のコントロールが編集可能になったときを制御することで解決できる同様の問題を抱えていた プロパティが "editable"がtrueの場合にのみドロップダウンが編集可能になります。この情報がお役に立てば幸いです...ここで

は私の例である -

<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

私はkarthiks3000を説明するものと一致しています。 しかし、表示されないようにするには（セルをクリックしたときに無効になっているドロップダウンが表示されます）、値に基づいてエディタテンプレートを削除する* ngIfを使用できます。例えば

：

<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