标签: angular-ngselect

我正在使用 angular6 multi-select，它有一个项目列表，这些项目来自 angular 服务的对象数组，ngOnInit就像这样传入multi-select：

this.sensorTypes = [
  { label : "Power", value : "P"},
  { label : "Current", value : "C"},
  { label : "Voltage", value : "V"}
]

我想在multi-select表单加载时默认设置 2 个值。对于这个我结合ngModel上multi-select，并在该变量我在设定值ngOnInit这样的

this.selectedAttributes = [
  {label : "Current", value : "C"},
  {label : "Voltage", value : "V"}
]

在我的 component.html 中，我是这样创建的multi-select：

<div class="form-group row">
  <div class="col-sm-10">
    <ng-select 
       [ngClass]="'ng-select'" 
       [(ngModel)]="selectedAttributes" 
       [ngModelOptions]="{standalone: true}" 
       [options]="sensorTypes"
       [multiple]="true">
    </ng-select> …

我正在使用ng-select从远程加载的大列表中选择多个值，具体取决于用户在框中键入的内容。以下是我的要求：

1. 动态添加的标签
2. 已选择的值不显示下拉列表。它仅用于提前输入可用的、未选择的值。

以下是我目前遇到的问题：

• 如果所选标签不是items列表的一部分，则不会显示。
• 使用标签对象作为一个数组[(ngModel)]品牌ng-select把它像所有不存在的价值。ng-select似乎只在[(ngModel)]when 中使用 ID [mutiple]=true，而不是在when 中使用所选对象[multiple]=false
• 该tagsInput$观察到的不被解雇，如果[isOpen]=false

我已经验证它tagsService运行正常。

目前来看：

<ng-select [items]="tags$ | async"
           bindValue="name"
           [loading]="tagsLoading"
           [typeahead]="tagsInput$"
           [multiple]="true"
           [isOpen]="tagsOpen"
           [searchFn]="filterSelectedTags"
           [(ngModel)]="selectedTagIds"></ng-select>

电流控制器：

class TagFormComponent {

  public tags$: Observable<Tag[]>;
  public tagsLoading: boolean;
  public tagsInput$: Subject<string>;
  public tagsChanger$: Subject<Tag[]>;
  public selectedTags: Tag[];
  public selectedTagIds: number[];
  public tagsOpen: boolean;

  constructor(private tagService: TagService) {

    this.tagsInput$ = new Subject<string>();
    this.tagsChanger$ = new Subject<Tag[]>(); …

我们正在porject 中使用ng-select，我现在正面临着无法禁用ng-select窗口的问题。是否可以使用本机代码禁用它，或者我需要找到一些自定义解决方案？

  <ng-select 
    #changeowner
    class="custom-owner"
    [placeholder]="leagueOwner.full_name"
    [clearSearchOnAdd]="true"
    (change)="changeLeagueOwner($event)"
    [clearable]="false"
    [virtualScroll]="true"
    [items]="adminLeagueMembers"
    (scrollToEnd)="onAdminLoadScrollEnd()"
    bindLabel="full_name">
</ng-select>

我在 Angular 应用程序中使用 ng-select，并且有一个非常不寻常的用例。我需要始终显示占位符，即使在选定的选项上也是如此。在当前代码中，占位符将替换为所选选项的值：

<ng-select
  [(ngModel)]="selectedApplication"
  class="application-switcher"
  [attr.data-sel-id]="selId"
  [clearable]="false"
  appendTo="body"
  [searchable]="false"
  placeholder="{{ 'APP_TITLE' | translate }}"
  [virtualScroll]="virtualScroll"
  [markFirst]="false">
    <ng-option *ngFor="let application of applicationList" [value]="application">
      <div>
        {{ getApplicationName(application) }}
      </div>
    </ng-option>
</ng-select>

我正在使用ng-select并在选定的项目上触发执行一些逻辑的回调。我面临的问题是，(add)当我从列表中选择该项目并使用该(change)事件时，该事件不会触发。但是，如果我使用列表中的一项两次，则更改事件不会触发，因为它是一个更改事件。

<ng-select 
    [clearSearchOnAdd]="true"
    (change)="changeLeagueOwner($event)"
    (add)="test()" ---> nothing here
    [clearable]="false"
    [items]="adminLeagueMembers"
    bindLabel="display_name">
</ng-select>

我想在属性bindLabel中有两个值的ng-select。我有这样的事情：

<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
                           name="users"  [items]="users" bindLabel="firstName" >

 </ng-select>

但是在绑定标签中，我想让bindLabel = firstName + lastName。像这样：

<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
                           name="users"  [items]="users" bindLabel="firstName+lastName">

 </ng-select>

如何实现呢？

我正在使用 ng-select 库https://github.com/ng-select/ 1.4.2 版的 Angular 5。我想自定义它，以便 ng-select 的高度更小。如何做到这一点？我在https://github.com/ng-select/ng-select#custom-styles 上查看了自定义样式，但无法使其正常工作。

我已经添加了一个定制的 CCS，试图做到这一点。

这是我的 ng-select 代码

                <label class="col-sm-4 text-sm-right col-form-label">Payout Format</label>
                <div class="col-sm-8">
                    <ng-select
                        [items]="payoutFormats"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindValue="payoutBatchFormatID"
                        bindLabel="name"
                        placeholder="All"
                        [(ngModel)]="filter.payoutFormats"
                        name="payoutFormat"
                        class="custom">
                    </ng-select>
                </div>

这是我添加的用于自定义它的 CSS：

.ng-select.custom {
    height:5px;
    font-size: 0.8em;
}

.ng-select.custom .ng-select-container  {
    height:5px;
}

可以看出，我尝试在 2 个地方设置高度，但没有效果。我能够成功更改字体大小。

这是我的选择在 CSS 之后的样子：

我需要它更小。

我想在 ng-select 下拉列表中合并两个 API 字段“代码和名称”。例如：-

  Code       : MI

  name       : MI 3sPrime

 Format      : MI - MI 3sPrime

我使用以下代码进行下拉

组件.html

<ng-select [items]="products" bindLabel="code" bindValue="id"
                placeholder="Select Goods Receipt" clearAllText="Clear" formControlName="productId" [searchFn]="customSearchFn">

                  <ng-template ng-label-tmp let-item="item">
                    <span [ngOptionHighlight]="search">{{ item.code }} - {{ item.name }}</span>
                  </ng-template>

                  <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
                    <span [ngOptionHighlight]="search">{{ item.code }} - {{ item.name }}</span>
                  </ng-template>

</ng-select>

组件.ts

  customSearchFn(term: string, item: any) {
    term = term.toLocaleLowerCase();
    return item.code.toLocaleLowerCase().indexOf(term) > -1 || 
    item.name.toLocaleLowerCase().indexOf(term) > -1;
 }

搜索中：搜索时正在获取代码和名称。但我想搜索代码、名称和给定格式（代码 - …

我正在使用ng-select下拉搜索，但如果没有从下拉列表中选择任何内容，我将无法获得验证。我像下面这样返回：

<div class="form-group">
   <ng-select [items]="productData" [searchable]="true" bindLabel="productName"
   [formControl]="prodCode"
   [ngClass]="{ 'is-invalid': submitted && f.prodCode.errors }"
   placeholder="Select Product" required>  
   </ng-select>
   <div *ngIf="submitted && f.prodCode.errors" class="invalid-feedback">
      <div *ngIf="f.prodCode.errors.required">Product Code is required</div>
   </div>
</div>

在 Ts 文件中

this.productForm = this.fb.group({
    prodCode: new FormControl(null, Validators.required)
});
get f() {
    return this.productForm.controls;
}
this.submitted = true;
if (this.productForm.invalid) {
    return;
}

所以恳请您让我知道我的错误在哪里......

我正在使用ng-select显示我的应用程序从 API 检索到的数据，但尽管数据已成功检索到，但下拉列表中并未显示任何内容。它只是说“未找到任何项目”。在控制台中，我有以下错误：

ERROR TypeError: Cannot read property '$ngoptionlabel' of null

这是我的打字稿代码：

// in a service, using HttpClient
this.http.get<string[]>(url);

// in a component, using the service injected in
data: string[] = [];
this.service.get()
   .subscribe(data => {
      this.data = data; // data contains values as expected
      // other logic
   });

在我的模板中，我传递this.data给ng-select.

<ng-select [items]="data"
           [multiple]="true"
           [closeOnSelect]="false"
           [searchable]="true">
</ng-select>

我认为错误听起来可能与bindLabel选项有关，但我没有使用它。错误是什么意思，我该如何解决？