如何在 angular5 中列出 ng2-select 中的客户端？

Question

我想用一个名为 listClient 的变量初始化我的 select，该变量存在于组件：project.component.ts 中。我在 angular5.

中使用 ng2-select

这是文件 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"
....

}

我只想显示名字和姓氏，然后将 selected id 发送到 project.component.ts

我找不到任何关于如何做到这一点的完整示例，知道吗？

Answer 1

我相信你正在使用这个 ng2-select: https://valor-software.com/ng2-select/.

文档指出项目集合必须有一个 ID 属性和一个文本属性。来自文档：

items - (Array) - Array of items from which to select. Should be an array of objects with id and text properties.

由于您的 listClient 没有这些属性，我建议在 Typescript 中编写 getter 到 return 具有这些属性的映射列表。

设置项目属性:

<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>

在 Typescript 中使用 get 映射值：

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;
  }



}

如何在 angular5 中列出 ng2-select 中的客户端？

How to list clients inside ng2-select in angular5?

twitter-bootstrap

angular2-template

angular

angular5