在 PrimeNG 和 DataView 的 header 底部添加一个 div

Question

在我的 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>

Answer 1

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

要实现这一点：在您的 component.html 中请查看 lorem 块

<p-dataView
    #dv
    [value]="cars"
    [paginator]="true"
    [rows]="20"
    paginatorPosition="both"
    filterBy="brand"
    [sortField]="sortField"
    [sortOrder]="sortOrder"
>
    <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 class="ui-g white-bg">
                    <div class="ui-g-6 ui-md-4">
                        Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit. Accusamus cupiditate dolores esse id ipsam omnis
                        reiciendis repellat, temporibus voluptas? Consequuntur
                        dolor inventore natus, porro quis tempore veniam.
                        Consectetur consequatur deleniti esse ex molestiae rem
                        sed temporibus voluptates! Ad aliquam, aspernatur cum
                        cumque fugiat harum ipsa, ipsam laudantium modi nemo
                        perferendis perspiciatis quis, quos rerum veritatis?
                    </div>
                </div>
            </div>
        </div>
    </p-header>

第 2 步：在您的 component.css 中：

:host ::ng-deep {
    .white-bg {
        background-color: lightskyblue;
    }
}

如果要显示分页下方的行，可以采用相同的方法。