Как заставить select2 работать с Angular 7 - PullRequest
Новая
       34

Как заставить select2 работать с Angular 7

0 голосов
/ 13 февраля 2019

Я пытаюсь внедрить Select 2 в мой проект Angular 7.Я следовал всем процедурам для реализации с GitHub.Но все равно его не работает.Это работает, когда я представляю некоторые статические данные в него.Это не заполнение данных с веб-сервера.Пожалуйста, поделитесь своими идеями.Ниже мой код

HTML-код: 

  <select2 [options]="areas" [settings]="{ width: '100%' }"></select2>

  <div *ngFor="let ar of areas">
    <p>{{ar.Area_Name}}</p>
  </div>

Код компонента: 

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ObjectAreas } from './areasObject';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.css',
    '../../node_modules/bootstrap/dist/css/bootstrap.min.css'
  ]
})
export class AppComponent 
{  
  apiURL: string = 'http://localhost/support/php/getAreas.php?areasno=0';

  constructor(private httpClient: HttpClient) { }

  areas: ObjectAreas;

  public getContacts()
  {
    return this.httpClient.get(this.apiURL);
  }

  ngOnInit()
  {
    this.getContacts()
      .subscribe((res:ObjectLoan)=>
        {      
          this.areas  = res;                           
        });              
  }

}

МодельКласс: 

export class ObjectAreas
{
    AreaSno: number;
    Area_Code: string;
    Area_Name: string;
}

Я получаю эту ошибку в консоли: 

TypeError: Cannot read property 'toString' of undefined

1 Ответ

0 голосов
/ 13 февраля 2019

Вам потребуется использовать библиотеку ng2-select2.

Попробуйте использовать ее так, как показано здесь.

https://github.com/NejcZdovc/ng2-select2

https://github.com/NejcZdovc/ng2-select2#prerequisites

Также сохраните areas в атрибуте данных вместо опций 

<select2 [data]="areas" ></select2>

Seeu обновил функцию ngOnit, которая принимает объект res и создает массив всех заголовков. 

  ngOnInit()
  {
    this.getContacts()
      .subscribe((res:any)=>
        {      
             console.log(res)
             var arr = [];

             for(var i=0; i<res.length; i++) {
                var x = res[i].title ;
                arr.push(x);
             }
            //console.log(arr)
            this.users  =  arr;
        });      

  }

Если вам нужен массив идентификаторов пользователей, просто измените эту строку var x = res[i].title ; на var x = res[i].userId ;

...