在PrimeNG和DataView的标题底部添加div

Posted 2023-02-27

在我的Angular 8应用中，我有一个PrimeNG DataView元素。在此元素中，很简单，我将在标题的底部添加一行字段名称。

因此，我尝试在此组件的html代码的每个可能位置添加<div>标记，以了解操作方法和：或此标记太高（可见，但不在标题底部） ，但位于搜索行和分页器行之间），否则它被隐藏了。对我来说，不可能在正确的位置添加div标签，使该div可见。

我附上图像（请考虑唯一的一点1）和代码。

<p-header>
            <div class="ui-helper-clearfix">
                <div class="ui-g">
                    <div class="ui-g-12 ui-md-4">
                        <p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange($event)" [style]="'min-width':'140px'"></p-dropdown>
                    </div>
                    <div class="ui-g-6 ui-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="ui-g-6 ui-md-4" style="text-align:right">
                        <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
                    </div>
                </div>
            <!-- A div at this exact position is visibile but is not at the bottom of header -->
            </div>
        <!-- A div at this exact position, maybe the better and more logic one, is unvisible -->
        </p-header>
        <!-- End of the header, start of data row; a div at this exact position is unvisible --> 
        <ng-template let-person pTemplate="listItem">
            <div class="ui-g-12">
                <div class="car-details">
                    <div>
                        <div class="ui-g">
                            <div class="ui-g-12">Vin: <b>person.id</b></div>
                            <div class="ui-g-12">Year: <b>person.name</b></div>
                            <div class="ui-g-12">Brand: <b>person.surname</b></div>
                            <div class="ui-g-12">Color: <b>person.officeNumber</b></div>
                        </div>
                    </div>
                    <button pButton type="button" icon="pi pi-search" (click)="selectPerson($event, person)"></button>
                </div>
            </div>
        </ng-template>

答案

根据您对问题的理解，我为您添加了一行。请参阅屏幕截图以供参考。为方便起见，我以lightblue背景色突出显示。