angular - 如何显示选定的自定义数据' optionLabel 下拉列表 primeng

Question

我想在 primeng 的下拉列表中显示选定的自定义数据 显示所选数据与下拉列表中显示的数据相同 请查看这两张图片

<div class="p-grid" *ngIf="deleteUser" style="place-content :center">
                        <div class="p-col-12 p-md-6">
                            <div class="card" style="background-color: var(--secondary-backgound-color);">
                                <div class="p-fluid p-formgrid p-grid">
                                    <div class="p-field p-col-12">
                                        <label for="points">CURRENT USERS</label>
                                        <p-dropdown [options]="sourceEmployees" placeholder="Select" optionLabel="firstName"
                                            class="dropdown-width" [showClear]="true" formControlName="deleteCurrentUsers" [(ngModel)]="selectedDeletedUsers"
                                            [ngClass]="{ 'ng-dirty': submitted && formFieldManageUsers.deleteCurrentUsers.errors }">
                                            <ng-template pTemplate="selectedDeletedUsers">
                                                <div class="item-value" *ngIf="selectedDeletedUsers">
                                                    <div>{{selectedDeletedUsers.firstName}} {{selectedDeletedUsers.lastName}} - {{(selectedDeletedUsers.isActive ? 'ACTIVE' : 'INACTIVE')}}</div>
                                                </div>
                                            </ng-template>
                                            <ng-template let-users pTemplate="sourceEmployees">
                                                <div class="item">
                                                    <div>{{users.firstName}} {{users.lastName}} - {{(users.isActive ? 'ACTIVE' : 'INACTIVE')}}</div>
                                                </div>
                                            </ng-template>
                                        </p-dropdown>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

我现在也遇到了同样的问题，现在已经解决了。 比较我所做的与你的代码:

• pTemplate="selectedDeletedUsers" 我更改为 pTemplate="selectedItem";

• 我将您的 class="item-value" 更改为 class="item" 并删除了 *ngIf="selectedDeletedUsers" 因为只有当您选择了某些内容时它才会陷入这种情况(至少对我来说，它也会在同一位置出现 ngIf 问题)；

• 为了安全起见，我将您的 pTemplate="sourceEmployees" 更改为 pTemplate="item"。

最终结果:

<div class="p-grid" *ngIf="deleteUser" style="place-content :center">
  <div class="p-col-12 p-md-6">
      <div class="card" style="background-color: var(--secondary-backgound-color);">
          <div class="p-fluid p-formgrid p-grid">
              <div class="p-field p-col-12">
                  <label for="points">CURRENT USERS</label>

                  <p-dropdown [options]="sourceEmployees" placeholder="Select" optionLabel="firstName"
                      class="dropdown-width" [showClear]="true" formControlName="deleteCurrentUsers" [(ngModel)]="selectedDeletedUsers"
                      [ngClass]="{ 'ng-dirty': submitted && formFieldManageUsers.deleteCurrentUsers.errors }">

                      <ng-template pTemplate="selectedItem">
                          <div class="item">
                              <div>{{selectedDeletedUsers.firstName}} {{selectedDeletedUsers.lastName}} - {{(selectedDeletedUsers.isActive ? 'ACTIVE' : 'INACTIVE')}}</div>
                          </div>
                      </ng-template>
                      
                      <ng-template let-users pTemplate="item">
                          <div class="item">
                              <div>{{users.firstName}} {{users.lastName}} - {{(users.isActive ? 'ACTIVE' : 'INACTIVE')}}</div>
                          </div>
                      </ng-template>
                  </p-dropdown>
              </div>
          </div>
      </div>
  </div>
</div>

由于您提出问题已经很久了，我相信您已经解决了问题。但我希望它能在某种程度上有所帮助。