Как перечислить клиентов внутри ng2-select в angular5? - PullRequest
Новая
       14

Как перечислить клиентов внутри ng2-select в angular5?

0 голосов
/ 12 мая 2018

Я хотел бы инициализировать мой выбор с помощью переменной с именем: listClient, которая существует в компоненте: project.component.ts.Я использую ng2-select в angular5.

Это файл project.component.ts: 

import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ProjetService} from '../../../../../service/projet.service';
import {Projet} from '../../Models/Projet';
import { ModalDirective } from 'ngx-bootstrap/modal';
import 'rxjs/add/operator/map';
import {ClientService} from '../../../../../service/client.service';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {

listClients:any;

constructor(private router:Router,
              private projetSevice:ProjetService,
              private clientServ:ClientService,
              private route: ActivatedRoute) { }

 ngOnInit() {
       this.doSearch();
       this.clientList(); // to initialize the variable listClient i want to 
                             show in ng2-select
  }

clientList(){
    this.clientServ.getListClients()
      .subscribe((data:any)=>{
        this.listClients=data;
      },err=>{
        console.log('this is error ');
      })
  }

public selected(value:any):void {
    console.log('Selected value is: ', value);
  }

  public removed(value:any):void {
    console.log('Removed value is: ', value);
  }

  public typed(value:any):void {
    console.log('New search input: ', value);
  }

  public refreshValue(value:any):void {
    this.value = value;
  }



}

Это project.component.html: 

<div class="form-group row">
      <label class="col-sm-5 col-form-label">To select a client : </label>
      <div class="col-sm-6">

        <ng-select [allowClear]="true"
                   [items]=""
                   (data)="refreshValue($event)"
                   (selected)="selected($event)"
                   (removed)="removed($event)"
                   (typed)="typed($event)"
                   placeholder="select a client"

        >
        </ng-select>


      </div>
    </div>

Переменная listClient имеет вид: 

{
id : 1
firstname : "jack"
lastname  : "alterd"
....

}

Я хочу показать только имя с фамилией, а затем отправить выбранный идентификатор на project.component.ts

Я не могу найти полный пример того, как это сделать, любая идея?

1 Ответ

0 голосов
/ 12 мая 2018

Я полагаю, что вы используете этот ng2-select: https://valor -software.com / ng2-select / .

В документации указано, что коллекция элементов должна иметь свойство id и свойство text. Из документа:

items - (Array) - массив элементов, из которых можно выбрать. Должно быть массив объектов со свойствами id и text.

Поскольку ваш listClient не имеет этих свойств, я бы рекомендовал написать метод получения в Typescript, чтобы вернуть сопоставленный список, который имеет.

Установить свойство items: 

<div class="form-group row">
    <label class="col-sm-5 col-form-label">To select a client : </label>
    <div class="col-sm-6">

    <ng-select *ngIf="_listClients"
               [allowClear]="true"
               [items]="listClient"
               (data)="refreshValue($event)"
               (selected)="selected($event)"
               (removed)="removed($event)"
               (typed)="typed($event)"
               placeholder="select a client">
    </ng-select>


  </div>
</div>

Сопоставить значения, используя get в Typescript: 

import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ProjetService} from '../../../../../service/projet.service';
import {Projet} from '../../Models/Projet';
import { ModalDirective } from 'ngx-bootstrap/modal';
import 'rxjs/add/operator/map';
import {ClientService} from '../../../../../service/client.service';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {

//create private instance
_listClients:any;

constructor(private router:Router,
              private projetSevice:ProjetService,
              private clientServ:ClientService,
              private route: ActivatedRoute) { }

 ngOnInit() {
       this.doSearch();
       this.clientList(); // to initialize the variable listClient i want to 
                          // show in ng2-select
  }
  //list client getter
  get listClient() {
    return this._listClients ? this._listClients.map(item => {
      return { id: item.id, text: (item.lastName + ', ' + item.firstName)}
    }) : [];
  }

clientList(){
    this.clientServ.getListClients()
      .subscribe((data:any)=>{
        //initialize the private instance
        this._listClients=data;
      },err=>{
        console.log('this is error ');
      })
  }

public selected(value:any):void {
    console.log('Selected value is: ', value);
  }

  public removed(value:any):void {
    console.log('Removed value is: ', value);
  }

  public typed(value:any):void {
    console.log('New search input: ', value);
  }

  public refreshValue(value:any):void {
    this.value = value;
  }



}
...