ng-select: как выбрать несколько элементов, имеющих одинаковую метку, но разные объекты - PullRequest
Новая
       26

ng-select: как выбрать несколько элементов, имеющих одинаковую метку, но разные объекты

0 голосов
/ 07 февраля 2020

Я пытаюсь исправить несколько выбранных элементов в выпадающем списке 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>

app.component.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)
      })
    }
    this.group = this.fb.group(formModel);
    this.group.patchValue({
      school: {
        code:
          [
            {
              schoolId: 'SC003',
              displayLabel: 'Test-3 school',
              city: "City1"
            },
            {
              schoolId: 'SC005',
              displayLabel: 'Test-3 school',
              city: "City5"
            }
          ]
      }
    });
  }

  initSchools() {
    this.schools.push(
      {
        schoolId: 'SC001',
        displayLabel: 'Test-1 school',
        city: "City1"
      },
      {
        schoolId: 'SC002',
        displayLabel: 'Test-2 school',
        city: "City2"
      },
      {
        schoolId: 'SC003',
        displayLabel: 'Test-3 school',
        city: "City3"
      },
      {
        schoolId: 'SC004',
        displayLabel: 'Test-4 school',
        city: "City4"
      },
      {
        schoolId: 'SC005',
        displayLabel: 'Test-3 school',
        city: "City5"
      }
    );
  }
}

В приведенном выше примере выбирается только объект для элемента 

    {
      schoolId: 'SC003',
      displayLabel: 'Test-3 school',
      city: "City1"
    },

,

, а элемент ниже 

    {
      schoolId: 'SC005',
      displayLabel: 'Test-3 school',
      city: "City5"
    }

Как должно быть выбрано оба элемента в выпадающий (с предоставлением уникальных объектов). Здесь что-то упущено? Любой другой способ добиться этого.

Пример работы здесь: https://stackblitz.com/edit/angular-szel64?file=src%2Fapp%2Fapp.component.ts

1 Ответ

0 голосов
/ 12 февраля 2020

Обнаружено, что для ng-select существует опция CompareWith, которая позволяет определить функцию для сравнения объектов. Используя это, вы можете связывать объекты, и он выбирается в зависимости от функции, предоставляемой опцией compareWith.

Ниже приведены мои изменения на случай, если кто-то попадет в ту же проблему

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"
      [compareWith]="compareFunction">
        </ng-select>
    </div>
</form>

app.component.ts 

...
  compareFunction(item, selected) {
// any logic to compare the objects and return true or false
    return item.schoolId === selected.schoolId
  }
...
...