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

Я начал играть с Primeng, чтобы получить некоторый пользовательский интерфейс, необходимый для моего приложения. В настоящее время работает с данными. Я пытаюсь создать приборную панель, которая условно оформлена. Следующее - это снимок того, что мне нужно достичь, но не могу заставить стиль появляться. Primeng beta 10/Angular2 Стиль таблицы данных RC4 не отображается

Вот мой код. Код все еще не учитывает условие, но я даже не могу получить ячейки в столбце трендов, чтобы иметь другой цвет. Вот мои испытания с использованием primeng бета 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>

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

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

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

источник

2016-07-22 Afi

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

<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 так, чтобы он поместился в ячейку. Попробуйте использовать отрицательные поля. Надеюсь это поможет!

источник

2016-08-11 07:09:28

Спасибо @Gayan, Я пробовал шаблон и работал, но не с этим синтаксисом, который у вас есть, с этим синтаксисом моя работа не работает. Я использовал

, и хорошо, что заголовок не будет затронут при использовании шаблона таким образом. Как вы упомянули, я должен сыграть с css, чтобы сделать div подходящим для ячеек. – Afi

Добро пожаловать @Afi. Для меня это сработало. Я использовал PrimeNG Beta 12, который был недавно выпущен. Поэтому я думаю, что причина в том, что это не сработало. –

@Afi: см. Мой ответ на связанный с ним вопрос http://stackoverflow.com/a/42013275/7307355 для примера того, как сделать div подходящим в ячейке и устранить окружающее пустое пространство. – stewdebaker

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

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

источник

2016-08-09 05:48:01

Спасибо, Гайан за ваш ответ, Положив стиль таким образом, он будет обрабатывать весь столбец, включая заголовок. – Afi

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

ответ

Смежные вопросы