PrimeFlex 的 PrimeNG DataView 组件布局问题答案

【问题标题】：PrimeNG DataView component layout issues with PrimeFlexPrimeFlex 的 PrimeNG DataView 组件布局问题
【发布时间】：2021-09-28 08:58:16
【问题描述】：

我正在使用 PrimeNG DataView 组件，该组件说要使用 PrimeFlex 的弹性网格 CSS 类来创建网格结构。

这是他们的例子之一，他们说：

在网格模式下，ng-template 元素应该包含一个 div 元素作为包装器，并带有您选择的 PrimeFlex 样式类。

<p-dataView [value]="cars">
    <ng-template let-car pTemplate="listItem">
        <div>
            {{car.id}}
        </div>
    </ng-template>
    <ng-template let-car pTemplate="gridItem">
        <div class="p-col-12 p-md-3">
            {{car.year}}
        </div>
    </ng-template>
</p-dataView>

在我自己的代码中我已经尝试过了，见下文。经过一番尝试找出它为什么不起作用后，我去检查了 PrimeFlex CSS 文件中的实际 .p-grid 和 .p-col-* 样式，但找不到任何东西。

<p-dataView [value]="shows" layout="grid">
  <ng-template pTemplate="header"> List of shows </ng-template>

  <ng-template let-show pTemplate="gridItem">
    <div class="p-col-12 p-md-4">
      <div class="show-grid-item card">
        {{ show.title }}
      </div>
    </div>
  </ng-template>
</p-dataView>

我不知道为什么这里记录的 FlexGrid 样式： https://www.primefaces.org/showcase/ui/panel/flexGrid.xhtml?jfwid=e9606 不包含在我的 primeflex.css 文件中。

如果我无法获得这些特定样式，有没有办法让 DataView 组件只使用 PrimeFlex 的常规 Grid 样式？

【问题讨论】：

标签： css angular typescript primeng primeflex

【解决方案1】：

如果你使用 primeng 12 和 primeflex 尝试在你的 style.css 中添加。至少在他们更新未来版本中的错误之前。

.p-grid {
display: flex;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
margin-top: -0.5rem;

}

这是我的html代码：

<p-dataView [value]="articuloViewList" layout="grid">
            <ng-template pTemplate="header">
                <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
            </ng-template>
            <ng-template let-art pTemplate="listItem">
                <div>
                    {{art.artName}}
                </div>
            </ng-template>
            <ng-template let-art pTemplate="gridItem" #gridI>
                <div class="col-12 md:col-2">
                    {{art.artNombre}}
                </div>
            </ng-template>
        </p-dataView>

【讨论】：