Не отображается стиль таблицы данных Primeng beta 10 / Angular2 RC4

Я начал играть с Primeng, чтобы получить часть пользовательского интерфейса, необходимого для моего приложения. Тот, с которым в настоящее время работает, является datatable. Я пытаюсь создать приборную панель с условным стилем. Ниже приведен снимок того, чего мне нужно достичь, но я не могу показать стиль. введите описание изображения здесь

Вот мой код. Код по-прежнему не учитывает условие, но я даже не могу заставить ячейки в столбце тренда иметь другой цвет. Вот мои испытания с использованием primeng beta 10:

<p-dataTable [value]="perfData" >
            <p-column field="Title" header="Title"></p-column>
            <p-column field="Curr Test" header="Curr Test"></p-column>
            <p-column field="Trend" header="Trend" [style.background-color]="blue">

            </p-column>
            <p-column field="Prev Test" header="Prev Test"></p-column>

 </p-dataTable>

Я даже попробовал шаблон шаблона, как было продемонстрировано примерами, но безуспешно:

<p-dataTable [value]="perfData" >
            <p-column field="Title" header="Title"></p-column>
            <p-column field="Curr Test" header="Curr Test"></p-column>
            <p-column field="Trend" header="Trend">
                <template let-col let-row="rowData">
                    <span [style.background-color]="blue">{{row[col.field]}}</span>
                </template>
            </p-column>
            <p-column field="Prev Test" header="Prev Test"></p-column>
 </p-dataTable>

Оба этих кода приводят к одному и тому же снимку для моей таблицы ниже. Что я делаю неправильно?

PS: я использую webpack и включил файлы css, необходимые для primeui, в свой индекс html следующим образом:

<link rel="stylesheet" type="text/css" href="./css/primeui-ng-all.min.css" />
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="./css/theme.css" />

Спасибо за любую помощь!

введите описание изображения здесь


primeng
person Afi    schedule 22.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте этот способ, если вам не нужен цвет заголовка.

<p-dataTable [value]="perfData" >
   <p-column field="Title" header="Title"></p-column>
   <p-column field="Curr Test" header="Curr Test"></p-column>
   <p-column field="Trend" header="Trend">
     <template let-col let-row="rowData">
        <div [style.background-color]="(row[col.field] == header) ? 'none' : 'blue'">
          <span>{{ row[col.field] }}</span>
        </div>
     </template>
   </p-column>
   <p-column field="Prev Test" header="Prev Test"></p-column>
</p-dataTable>

Вам следует изменить CSS тега div таким образом, чтобы он соответствовал ячейке. Попробуйте использовать отрицательные поля. Надеюсь это поможет!

person Gayan Kalhara    schedule 11.08.2016
comment
Спасибо @Gayan, я попробовал шаблон и работал, но не с этим синтаксисом, который у вас есть, с этим синтаксисом мой не работает. Я использовал ‹div style = background-color: # 92D050› {{row [col.field]}} ‹/div›, и хорошо то, что заголовок не будет затронут при использовании шаблона таким образом. Как вы упомянули, мне нужно поиграть с css, чтобы div поместился в ячейки. - person Afi; 11.08.2016
comment
Добро пожаловать, @Afi. Для меня это сработало. Я использовал PrimeNG Beta 12, который был недавно выпущен. Я думаю, что это причина того, что это не сработало. - person Gayan Kalhara; 11.08.2016
comment
@Afi: См. Мой ответ на связанный вопрос stackoverflow.com/a/42013275/7307355 для примера того, как сделать div помещается в ячейку и устраняет окружающее белое пространство. - person stewdebaker; 03.02.2017

arrow_upward
1
arrow_downward

Я была такая же проблема. Я смог исправить это таким образом.

<p-dataTable [value]="perfData" >
     <p-column field="Title" header="Title"></p-column>
     <p-column field="Curr Test" header="Curr Test"></p-column>
     <p-column field="Trend" header="Trend" [style]="{'background-color':'blue'}">
     </p-column>
     <p-column field="Prev Test" header="Prev Test"></p-column>
</p-dataTable>
person Gayan Kalhara    schedule 09.08.2016
comment
Спасибо, Гаян, за ваш ответ, такой стиль сработал, но это окрасит весь столбец, включая заголовок. - person Afi; 09.08.2016