Comment faire fonctionner select2 avec Angular 7 ?

Question

J'essaie de mettre en œuvre Select 2 dans mon projet Angular 7. J'ai suivi toutes les procédures de mise en œuvre de Github. Mais cela ne fonctionne toujours pas. Il fonctionne lorsque je présente des données statiques dans le projet. Il ne remplit pas les données du serveur web. Veuillez partager vos idées. Voici mon code

Code Html :

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

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

Code du composant :

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

}

Classe de modèle :

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

J'obtiens cette erreur dans la console :

TypeError: Cannot read property 'toString' of undefined

Answer 1

Vous devrez utiliser ng2-select2 bibliothèque pour cela.

Essayez de l'utiliser de la manière dont il est démontré ici.

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

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

Gardez également le areas dans l'attribut data au lieu des options

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

Voir la fonction ngOnit mise à jour, qui prend l'objet res et crée un tableau de tous les titres.

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

  }

Si vous voulez un tableau d'identifiants, il suffit de modifier cette ligne. var x = res[i].title ; a var x = res[i].userId ;

Answer 2

Il accepte les données dans un format spécifique comme

[
    {
        id: 'uniqe_id',
        text: 'text_to_display'
    }
]

Vous devez d'abord convertir vos données dans ce format.