Блог

Главная - Вопросы по программированию - Применение p-столбца css в td не работает

Применение p-столбца css в td не работает

#css #angular #html-table #primeng

#css #angular #html-таблица #применение

Вопрос:

Я использую p-DataTable и хотел бы применить стиль в td, но этот стиль зависит от значения поля, и я не знаю, как это сделать. Мой код:

 <p-dataTable [value]="cars" resizableColumns="true" [responsive]="true" reorderableColumns="true">
  <p-column [styleClass]="carStyle" field="carDesc"></p-column>
  <p-column styleClass="ui-model-car" field="carModelDesc"></p-column>
  <p-column styleClass="ui-width-icon-car">
     <template let-col let-item="rowData" pTemplate type="body">
      <div data-toggle="tooltip" data-placement="left" title="{{item.typeCarDesc}}">
          <span class="icon-circle {{item.typeCarIcon}} {{item.carColor}}"></span>
      </div>
     </template>
  </p-column>
</p-dataTable>

carStyle может быть пустым или ui-without-border-top и мой css:

 td.ui-without-border-top {border-top-style: hidden;}

В моем html-сгенерированном коде я не вижу carStyle. Мне нужен стиль в td.

Комментарии:

1. Пожалуйста, подтвердите, правильно ли я понял ваш вопрос. Вы хотите добавить класс carStyle, если переменная carStyle не пуста. Вы хотите, чтобы класс ui-without-border-top добавлялся, если carStyle пуст?

2. Я хочу добавить класс ‘ui-without-border-top’ в td, переменная carStyle пуста или равна ‘ui-without-border-top’, поэтому я хотел установить [styleClass]=»carStyle», но html-код не устанавливает значение carStyle, но если я установлю эту переменную в div в шаблоне, html-код устанавливает значение carStyle ‘<p-column styleClass=»ui-width-room» > <шаблон let-col let-item=»rowData» Тип элемента =»body»> <класс div=»{{item.carStyle}}»> {{item.carDesc}} </div> </template> </p-column>’

3. Вы пробовали пользовательские селекторы Angular 2 для стилизации внутренних компонентов? angular.io/docs/ts/latest/guide /…

4. Я не знаю, как использовать эти селекторы в этой ситуации, потому что мне нужно задать стиль для некоторых td, а не для всех td таблицы. Проблема, если я помещаю css в столбец: [styleClass]=»carStyle», код не генерирует стиль, но если я помещаю класс в div: class=»{{item.carStyle}}», код генерирует стиль, но мне нужен стиль в td, а не в div

Ответ №1:

Пожалуйста, проверьте, был ли в вашем случае добавлен класс carStyle <td> .

Я покажу, как я сделал это без каких-либо проблем:

В моем шаблоне:

 <p-column styleClass="col-button">

И мой Scss:

 table {
    tbody
    {
        td.col-button {
            text-align: center;
        }
    }
}

Смотрите на скриншоте ниже, насколько хорошо это работало без проблем:
введите описание изображения здесь

Пожалуйста, проверьте свой код и повторите попытку. Пожалуйста, напишите в скрипте о вашей проблеме, если это не сработает.