PrimeNG Datatable - отключить редактирование ячеек для определенных строк

Question

Пожалуйста, проявите терпение длинным сообщением.

У меня есть редактируемые DataTable с помощью PrimeNG и Angular2, подобное с их 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> 

* Моя таблица содержит все столбцы с шаблонами, потому что мне нужно установить пользовательские CSS, если ячейка содержит ошибки.

Предположим, у нас есть поле Цена.

<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), например, a 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