标签: angular-ngselect

安装 ng-select 后：

npm install --save @ng-select/ng-select

我将材质样式导入到 style.scss 中：

@import "~@ng-select/ng-select/themes/material.theme.css";

身体 {

但毕竟，组件呈现出非常奇怪的外观。

查看 node_modules 文件夹，我看不到 ng-select 文件夹来查看它的主题文件夹。

请问有什么想法吗？

我希望我的 css 类根据条件进行更改。我正在尝试使用这个：

<div *ngIf="dropDownBg==='Active'">
<style type="text/css">
.ui-select-toggle{
    background: green !important;
  }
</style>

</div>


<div *ngIf="dropDownBg==='Suspended'">
<style type="text/css">
.ui-select-toggle{
    background: red !important;
  }
</style>

</div>

<div *ngIf="dropDownBg==='Disabled'">
<style type="text/css">
.ui-select-toggle{
    background: grey !important;
  }
</style>

</div>

但这不起作用。默认情况下，浏览器似乎忽略divs了*ngIf并且只有最后一个样式覆盖了其他样式。以下是浏览器解释：

更新：出现这种情况是因为我正在使用ng-select下拉菜单，它在内部使用了我无法控制的类“ui-select-toggle”。所以奇怪的人反对这个问题，请注意这一点。

这是代码：

<div style="min-width: 200px;position: absolute;right: 0">
           <ng-select 
                   [items]="items"
                    (selected)="selected($event)"
                    [active]="selectedItem"
                     (removed)="removed($event)"
                  placeholder="Select a number">
          </ng-select>
</div>

你好，我是 angular 2 的新手

我可以在 ng-select 控件中添加 formGroup 并预定义添加值。

那是完美的。但是当按钮单击然后新值推送 ng-select 但 ng-select not updates 。

这是我的笨蛋

https://plnkr.co/edit/Hwfk1T2stkiRcLTxuFmz

//our root app component
import {Component, OnInit, NgModule, ViewChild} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
import {SelectModule} from 'ng-select';

@Component({
    selector: 'my-app',
    template: `
<h1>ng-select demo app</h1>
<form style="padding:18px;max-width:800px;"
    [formGroup]="form">

    <div style="margin:5px 0;font-weight:600;">Single select example</div>
    <ng-select
          [options]="options0"
          [multiple]="false"
          placeholder="Select one"
      formControlName="selectSingle"
     >
    </ng-select>

   <button (click)="pushValue()">Click</button>



    <div>Events:</div>
    <pre #preSingle>{{logSingleString}}</pre>

</form>`
})
export class App implements OnInit { …

我在 Angular 5 中使用 ng-select 进行下拉。选择一个选项后，闪烁的光标应该消失或者它的位置应该在文本的末尾。但是从下拉列表中选择任何选项后，闪烁的光标将位于文本的开始位置。我该如何解决这个问题？

enter code here


    getHospital(term: string = null): Observable<Hospitals[]> {
    let items = this.getHospitals1();
    if (term) {
      items = items.filter(x => x.name.toLocaleLowerCase().indexOf(term.toLocaleLowerCase()) > -1);

    }
    return items.pipe(delay(500));;
  }



getHospitals1() : Observable<Hospitals[]>{

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

   }

当我添加过滤器时发生错误 这是使用 ng-select 的下拉列表的代码。它基于基于文本的搜索，这里使用 angular7 和 rxjs 6

在 Angular 6 项目中，我尝试使用ng-select节点包。在使用模板表达式时，我面临着在下拉列表中设置所选项目的困难。没有模板表达式，我可以设置在下拉列表中选择的项目。

我在 stackblitz 中创建了一个演示项目。请检查此处的代码https://stackblitz.com/edit/ngselect-demo

我尝试使用 ng-select 并遇到了一些问题。当我尝试禁用它时，如何更改 ng-select 中禁用的颜色。我还希望箭头图标在禁用时隐藏？我已经尝试过下面的代码，但它仍然无法工作。

更改禁用颜色

.ng-select.ng-select-red {
  color: green;
  background-color: green;
}

禁用时隐藏箭头

.ng-select:disabled.ng-arrow {
   display: none;
}

I added an error message to ng-select component to show error messages when it's dirty and value not selected. But the error message is not showing. But the validation is working.

https://ng-select.github.io/ng-select/

<form [formGroup]="itemForm" (ngSubmit)=onSubmitForm()>
    <div class="form-group col">
        <label for="pack_size">Supplier</label>
        <ng-select 
            bindLabel="supplier" 
            placeholder="Select Supplier" 
            formControlName="supplier"
            [ngClass]="{ 'is-invalid': supplier.invalid && supplier.touched }" 
            >
            <ng-option *ngFor="let supplier of suppliers" [value]="supplier.id">
                {{supplier.description}}
            </ng-option>
        </ng-select>
        <div *ngIf="supplier.invalid && supplier.touched" class="invalid-feedback">
            <div *ngIf="!!supplier.errors.required">Supplier is required</div>
        </div>
    </div>
    </div>
    <button class="btn btn-primary" type="submit"
                            [disabled]="itemForm.invalid">Add</button>
</form>

CSS …

我正在使用 ng-select 库在我的 Angular Web 应用程序中显示下拉菜单。

    <ng-select
      [items]="flattenedSelectList"
      bindLabel="displayName"
      placeholder="Select specialty"
      notFoundText="No results found. Please try a different search criteria."
      bindValue="id"
      [searchFn]="onSearch"
      groupBy="type"
      [(ngModel)]="selectedSpecialtyId">
      <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
        <span [ngOptionHighlight]="search" [title]="item.displayName">
        {{item.displayName}}
        </span>
        <div class='provider-specialty' *ngIf="shouldShowDepartmentName(item)">
          {{getAreasOfExpertise(item)}}
        </div>
      </ng-template>
    </ng-select>

我想在搜索框中放置一个搜索图标，而不是占位符文本“选择专业”。我怎样才能做到这一点？

我选择了由语言组成的 ng。一个用户可以有多种语言。在 ng 上绑定多个选定值时，选择其显示的空标签。我的代码如下。在编辑时，我想在 ng select 上显示保存的语言标签，但它显示空标签，请有人帮忙。我正在使用反应形式 **附有参考图片**

超文本标记语言

 <ng-select class="w-100" [multiple]="true"   [hideSelected]="true" placeholder="Please Select Language"
            formControlName="language" [bindValue]="language.id"  [bindLabel]="language.name" 
            >
            <ng-option *ngFor="let language of languages" [value]="language.id">{{language.name}}</ng-option>
          </ng-select>

打字稿

this.form.patchValue({ 语言: this.editData.teacherProfile.teacherProfile.language })

数据以这种形式检索 "language": [ { "_id": "5fb79cdd34ec021e64c2413e", "name": "English", "id": "5fb79cdd34ec021e64c2413e" }, { "_id": "5fb7996034ec021e64c2412a", "name": "阿拉伯语", "id": "5fb7996034ec021e64c2412a" } ],