标签: angular-ngselect

（我在这里转载我的问题：https : //plnkr.co/QvEWjhJhbsghy1OD）

<ng-select>选项的下拉列表未显示在该<ngx-datatable>行的上方，似乎已被单元格的高度削减，使其变得毫无用处。

常规<select>效果很好，但我可以看到所有选项。

如何使ng-select正常工作？

我正在对角6使用ng-select。

这是HTML的一面：

        <ng-select [(ngModel)]="client.categoryId"
                   class="form-control"
                   [ngClass]="{'is-invalid':clientCategoryId.errors && clientCategoryId.touched}"
                   #clientCategoryId="ngModel"
                   name="categoryId"
                   [addTag]="addTagNow"
                   required>
          <ng-option *ngFor="let cat of cats" [value]="cat.id">{{cat.title}}</ng-option>
        </ng-select>

这是打字稿：

nCategory: Category = {
  title: ''
};

constructor(public afs: AngularFirestore) {
  this.categoriesCollection = this.afs.collection('categories', ref => ref.orderBy('title', 'asc'));
}

addTagNow(name) {
  this.nCategory.title = name;
  this.categoriesCollection.add(this.nCategory);
}

这是错误：

NgSelectComponent.html:91 ERROR TypeError: Cannot set property 'title' of undefined at NgSelectComponent.push../src/app/components/edit-client/edit-client.component.ts.EditClientComponent.addTagNow [as addTag] (edit-client.component.ts:169)

如果我在外部运行代码 AddTagNow功能则可以正常工作。

如何执行该代码？

我在 Ionic3/Angular5 项目中使用 ng-select 并且我正在使用它的多选配置。选择输入的显示总是比包含所选项目或任何可用选项所需的要宽得多。

如果选择了任何一个可用选项，我希望它的宽度至少是组件将具有的最大宽度，否则宽度是包含主动选择的选项所需的任何宽度。

是否有可能让 ng-select 以这种方式表现？

我正在使用angular5 ng-select组件：https : //github.com/ng-select/ng-select， 并尝试在首次加载容器组件时（以编程方式）设置选定值（在模型）。我没有找到任何相关属性或每个项目的isSelected属性。这是我的代码（已过滤）：HTML：

<ng-select [items]="filter.values"  bindLabel="text" bindValue="id" class="input-md" [(ngModel)]="filter.selectedValue"></ng-select>

模型：

export class FilterData
{
    Name : string;
    FormattedName : string;
    values : Filter[];
    selectedValue : Filter = null;
    constructor(filterData : FilterData)
    {
        this.Name = filterData.Name;
        this.values = filterData.values;
        this.selectedValue = typeof filterData.selectedValue == "undefined" ? null : filterData.selectedValue;
    }
}

export class Filter 
{
    public id: number;
    public text: string;
}

我正在尝试修补 ng-select 下拉列表中的多个选定项目。我没有指定任何 bindValue，因此项目应该由对象绑定（如https://www.npmjs.com/package/@ng-select/ng-select中指定）

但是，在尝试执行此操作时，不会根据对象而是根据显示的标签来选择项目。此外，仅选择第一个标签。

示例：app.component.html

<form [formGroup]="group">
    <div class="form-group" formGroupName="school">
        <ng-select labelForId="school" placeholder="Select school" [items]="schools" formControlName="code"
            bindLabel="displayLabel" multiple="true" groupBy="city">
        </ng-select>
    </div>
</form>

应用程序组件.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  group: FormGroup;
  schools = [];
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.initSchools();
    const formModel = {
      school: new FormGroup({
        code: new FormControl(null, Validators.required) …

我正在使用ng-select v2和angular 7.

我在下面的return语句中收到错误

getHospital(term: string = null): Observable<Hospitals[]> {
    let items = this.getHospitals1();
    if (term) {
      items = items.pipe(
        filter((x,i) => x[i].name.toLocaleLowerCase().indexOf(term.toLocaleLowerCase()) > -1)
      )
    }
    return of(items).pipe(delay(500));
  }

3个错误说:

• 类型'Observable>'不能分配给'Observable'类型.
• 输入'Hospitals [] | Observable'不能分配给'Hospitals []'.
• 类型'Observable'不能分配给'Hospitals []'.

这是我的getHospitals1函数

getHospitals1() : Observable<Hospitals[]>{
    return this.http.get<Hospitals[]>('https://my-json-server.typicode.com/monsterbrain/FakeJsonServer/hospitals')
   }

export interface Hospitals {
  id: string;
  name: string;
  address: string;
}

应该改变什么来解决这个问题？

是否可以通过编程方式清除ng-select下拉列表的选择？我想要单击清除图标的等效行为，但是是以编程方式触发的。

我期待有一种clear()方法或类似的方法，但是文档化的API在这些方面没有任何内容。

这是我的下拉代码：

<ng-select class="ng-select-wrap"
           [searchFn]="multiTermSearch"
           [items]="calculationOptions"
           placeholder="Please select..."
           name="calculation"
           #calculationValue="ngModel"
           [(ngModel)]="selectedCalculation">
</ng-select>

我正在使用 ng-select 的标签功能，但当我从控制函数调用角度分量方法时遇到问题。我想this.isValidTag(tag)打电话this.modalService.warn从addTagFn(tag)

这是 html 模板

<div class="modal-header">
  <h5 class="modal-title">{{ headingKey | translate }}</h5>
  <button type="button" class="close" attr.aria-label="{{ 'common.actions.close' | translate }}"
    (click)="activeModal.dismiss()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body p-0">
  <div class="input-group">
    <label class="input-group-prepend" for="tag-keywords"><i class="fa fa-search" aria-hidden="true"></i></label>
    <ng-select labelForId="tag-keywords" [items]="tagsFound" notFoundText="{{ 'common.not-found' | translate }}"
      class="tag-keywords" loadingText="{{ 'common.loading' | translate }}" [hideSelected]="true" [selectOnTab]="true"
      multiple="true" bindLabel="name" [loading]="searching" [addTag]="addTagFn"
      (focus)="onTagFocus()" (search)="onTagSearch($event.term)" [(ngModel)]="selectedTags">
      <ng-template ng-tag-tmp let-search="searchTerm">
        <strong>{{ 'ideas.tags.form.create' | translate }}</strong>{{search}}
      </ng-template>
    </ng-select>
  </div>
  <div class="tag-search-results"></div>
</div> …