Question

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

我已经在stackblitz中创建了一个演示项目。请在此处https://stackblitz.com/edit/ngselect-demo

检查代码

Answer 1

ng-select 是非常灵活的组件，用于比较数组中的元素。

这里是findItem函数，负责进行比较：

// src/app/components/domain-detail/domain-detail.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { ApiClientService } from '../../core/api-client.service';

@Component({
  selector: 'app-domain-detail',
  templateUrl: './domain-detail.component.html',
  styleUrls: ['./domain-detail.component.scss']
})
export class DomainDetailComponent implements OnInit, OnDestroy {
  domainUuid: any;
  domains: any;
  private sub: any;

  constructor(
    private ApiClient: ApiClientService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    // my attempt at caching (still unfamiliar with Rxjs)
    this.sub = this.route.params.subscribe(params => {
      this.domainUuid = params.uuid;
    });
    this.ApiClient.getDomains().subscribe(data => this.domains = data.filter(item => item.uuid === this.domainUuid));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

如您所见，它遵循以下规则：

1）使用findItem(value: any): NgOption { let findBy: (item: NgOption) => boolean; if (this._ngSelect.compareWith) { findBy = item => this._ngSelect.compareWith(item.value, value) } else if (this._ngSelect.bindValue) { findBy = item => !item.children && this.resolveNested(item.value, this._ngSelect.bindValue) === value } else { findBy = item => item.value === value || !item.children && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel) } return this._items.find(item => findBy(item)); }功能（如果提供），否则

2）使用compareWith（如果提供），否则

3）使用bindValue（如果提供）

在第一个不使用模板表达式的控件中，您传递了bindLabel，因此它可以正常工作。如果您将相同的输入添加到第二个控件，它将起作用

Forked Stackblitz

如果您希望将所选值保留为对象数组，那么我建议您使用bindLabel输入

html

compareWith

ts

<ng-select 
  ...
  [compareWith]="compareWith"

Stackblitz Example

否则使用compareWith(item, selected) { return item.id === selected.id }

angular 6 ng-选择如何使用模板表达式设置在下拉列表中选择的项目

1 个答案: