primeNG中的数据视图未显示为网格

问题描述

我使用primeNG的DataView组件创建了一个简单的角度项目。当以列表的形式查看时，它工作正常，但是当我们选择网格选项时，我仍然看到一个项目在另一个项目的下面而不是网格。我不确定自己做错了什么，pTemplate="gridItem"仅将<p-panel>个项目显示在另一个项目的下方。我希望将其显示为网格

https://primefaces.org/primeng/showcase/#/dataview

HTML：

<p-dataView #dv [value]="cars" [paginator]="true" [rows]="20"  filterBy="brand" layout="grid"
[sortField]="sortField" [sortOrder]="sortOrder">
<p-header>
    <div class="ui-helper-clearfix">
        <div class="p-grid">
            <div class="p-col-12 p-md-4">
                <p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange($event)" [style]="{'min-width':'140px'}"></p-dropdown>
            </div>
            <div class="p-col-6 p-md-4 filter-container">
                <div style="position:relative">
                    <input type="search" pInputText placeholder="Search by brand" (input)="dv.filter($event.target.value)">
                </div>
            </div>
            <div class="p-col-6 p-md-4" style="text-align:right">
                <p-dataViewLayoutoptions></p-dataViewLayoutoptions>
            </div>
        </div>
    </div>
</p-header>
<ng-template let-car pTemplate="listItem">
    <div class="p-col-12">
        <div class="car-details">
            <div>
                <div class="p-grid">
                    <div class="p-col-12">Vin: <b>{{car.vin}}</b></div>
                    <div class="p-col-12">Year: <b>{{car.year}}</b></div>
                    <div class="p-col-12">Brand: <b>{{car.brand}}</b></div>
                    <div class="p-col-12">Color: <b>{{car.color}}</b></div>
                </div>
            </div>
            <button pButton type="button" icon="pi pi-search" (click)="selectCar($event,car)"></button>
        </div>
    </div>
</ng-template>
<ng-template let-car pTemplate="gridItem">
    <div style="padding:.5em" class="p-col-6 p-md-4">
        <p-panel [header]="car.brand" [style]="{'text-align':'center'}">
            <div class="car-detail">{{car.year}} - {{car.color}}</div>
            <button pButton type="button" icon="pi pi-search" (click)="selectCar($event,car)" style="margin-top:0"></button>
        </p-panel>
    </div>
</ng-template>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular primeng primeng-datatable