时间戳

首页 > 解决方案 > ng-select 不显示 bindLabel 值

angular - ng-select 不显示 bindLabel 值

问题描述

Ng-select 没有向客户端显示 bindLabel 值。也没有一个错误。我有几个 ng-select 下拉菜单。它在一个 div 中的一个下拉列表中显示值。但是，即使我在另一个 div 中使用相同的下拉菜单，它也不会显示该值。

这是我的一个 div 的下拉菜单：

<div class="col-12 col-sm-12 col-md-4 m-auto mt-2">
<ng-select [items]="immigrationOptions" placeholder="Immigration Status" bindLabel="immigration_s_name"
bindValue="id" [ngClass]="{ 'is-invalid': submitted && f.immigration_status_id.errors }" appendTo="body" [virtualScroll]="true" formControlName="immigration_status_id"             [(ngModel)]="immigrationOption" aria-describedby="cnt_immigration_status_id">
     </ng-select>
    <small id="cnt_immigration_status_id" class="form-text text-muted">Immigration Status</small>
    <div *ngIf="submitted && f.immigration_status_id.errors" class="invalid-feedback">
   <div *ngIf="f.immigration_status_id.errors.required">Immigration status is required</div>
</div>
</div>

我两次使用相同的下拉菜单。但是，它不会在另一个 div 的第二个下拉列表中向用户显示标签

请同时检查随附的屏幕截图。 一个正在工作，另一个只是显示空白

这没有在下拉列表中显示任何值。这在下拉列表中显示值：

下拉列表中的值

标签： angularangular-ngselect

解决方案

今天我也发生了同样的事情：

ng-select 使用项目数组通过如下绑定显示选项：[items]='itemArray'。这就是用户在首次填写表单时选择选项的方式（我们已经知道）。保存数据时，后端仅存储所选项目。

当重新使用表单来查看记录并可能再次编辑时，相同的项目数组不能为空。如果是，则不会显示所选选项。Angular 不发出任何警告，也不在乎。

Take Away ：无论是用户第一次编辑，还是从数据存储中读回内容以查看然后编辑，请确保 items 数组有内容。

推荐阅读