Question

我正在使用p-dataView，并且我想根据应用程序类型使用p-fieldset，我想找到一种不重复该字段集的方法。下面只是一种情况，我将以多个fieldsSet结尾。不确定执行此操作的最有效方法是什么？基本上，我试图将某些行分组以收集在一个字段集下。

例如：

<p-dataView [value]="someobject" [paginator]="true" [rows]="20">

    <ng-template let-prev let-rowIndexValue="rowIndex" pTemplate="listItem">

        <div class="container">
            <div class="row">
                <p-fieldset class="fieldset-auto-width" *ngIf="prev.app_type == 10">
                <p-header style="width:30px">Apps</p-header>
                    <div class="col-md-3">
                        <input type="checkbox" id="cbPreviewID" checked name="cbxPreview" (click)="togglePreviewApp($event,rowIndexValue)" style="margin-right:5px;margin-bottom:10px;margin-left:5px; margin-top:10px" [value]='prev.app_id'> {{prev.app_name}}
                    </div>

                    <div *ngIf="prev.roles.length>1" class="col-md-3" style="margin-right:5px;margin-bottom:10px;margin-left:5px; margin-top:10px">

                    <b>Role:</b> 
                    <select name="role" (ngModelChange)="selectedPreviewAppRole($event,rowIndexValue)" class="dropdown" style="width:85%" required [(ngModel)]="prev.seletedAppRoleID">
                        <option class="dropdown-item" value="" selected>Select</option>
                        <option class="dropdown-item" *ngFor='let role of prev.roles' [ngValue]="role.app_role_id">
                            {{role.app_role_name}}
                        </option>
                    </select>

                </p-fieldset>
            </div>  
        </div>                      
    </ng-template>                      
</p-dataView>

例如，测试1和2应该位于1个字段集之内，因为它们的（prev.app_type == 10“）

现在我得到：

正在寻找：

Answer 1

尝试在p-dataview中包含p-fieldset。它按预期工作。可能与* ngIf条件有关。

组件：

cars = [{
    id: 1,
    items: [{
      name: 'car1',
      description: 'this is car1 description'
    },{
      name: 'car2',
      description: 'this is car2 description'
    },{
      name: 'car3',
      description: 'this is car3 description'
    },{
      name: 'car4',
      description: 'this is car4 description'
    },{
      name: 'car5',
      description: 'this is car5 description'
    }]

}];

模板：

<p-dataView [value]="cars" [paginator]="true" [rows]="5">
  <p-header>List of Cars</p-header>
  <p-footer>Choose from the list.</p-footer>
  <ng-template let-car pTemplate="listItem">
      <p-fieldset legend="Header" *ngIf="car.id === 1" [toggleable]="true">
          <div *ngFor="let _car of car.items">
              {{_car.name}} - {{_car.description}}
          </div>
      </p-fieldset>
  </ng-template>
</p-dataView>

请参阅随附的屏幕截图。

PrimeNG p-dataView，不重复FieldSet

1 个答案: