PrimeNG p-dataView с неповторяющимся FieldSet - PullRequest
Новая
       16

PrimeNG p-dataView с неповторяющимся FieldSet

0 голосов
/ 14 декабря 2018

Я использую p-dataView, и я хотел бы использовать p-fieldset в зависимости от типа приложения, и я хотел бы найти способ, чтобы набор полей не повторялся.Ниже приведен только один случай, я буду заканчивать несколькими полями Set.Не уверен, что будет наиболее эффективным способом сделать это?В основном, я пытаюсь сгруппировать определенные строки для сбора в одном наборе полей.

, например: 

<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 ")

Теперь я получаю: enter image description here

Ищу: enter image description here

1 Ответ

0 голосов
/ 17 декабря 2018

enter image description here Пробовал, включая p-fieldset внутри p-dataview.Работает как положено.может быть проблема с условием * 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>

См. Прикрепленный скриншот.

...