Angular: p-multiselect optionValue-CodePudding

Let's say I have an overlaying modal page students-overlay.component.html


<ng-container *ngIf="{ students: students$ | async} as values">



    <label>Students</label>
    <p-multiSelect
        appendTo="body"
        formControlName="students"
        display="chip"
        [options]="values.students ? values.students : []"
        [style]="{'width':'100%'}"
        placeholder="Bitte auswählen"
        optionLabel="secondname"
        filterBy="secondname"
        optionValue="userId">
    </p-multiSelect>

and an underlying table template (students.component.html)


            <p-table [value]="studentdata"
                     selectionMode="single" [(selection)]="selectedStudents"
                     (onRowSelect)="onStudentsSelect()"
                     (onRowUnselect)="onStudentsUnselect()"
                     styleClass="p-datatable-striped p-datatable-sm">
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 14em">Student</th>
                        <th style="width: 2em"></th>
                    </tr>
                </ng-template>
             <ng-template pTemplate="body" let-item>
                    <tr [pSelectableRow]="item">
                        <td>{{item.students}}</td>
                        <td  style="text-align: right">
                </ng-template>
            </p-table>

Using the optionValue in students-overlay.component.html gives me only the userId but I need something like

{{item.userId}} - {{item.secondname}} - {{item.lastname}}

is there a possibility to use a second value within the property optionValue?

CodePudding user response：

You can provide custom templating to primeng multi select using pTemplate directive

 <label>Students</label>
    <p-multiSelect
      appendTo="body"
      display="chip"
      [options]="students"
      [style]="{ width: '100%' }"
      placeholder="Bitte auswählen"
      optionLabel="name"
      filterBy="secondname"
      optionValue="userId"
    >
      <ng-template let-student pTemplate="item">
        <div >
          <div>
            {{ student.userId }} - {{ student.secondname }} - {{ student.lastname }}
          </div>
        </div>
      </ng-template>
    </p-multiSelect>

Working Example