Угловой 6 нг-select2 заполнить от API - PullRequest
Новая
       27

Угловой 6 нг-select2 заполнить от API

0 голосов
/ 03 ноября 2018

У меня есть этот ответ JSON от API: 

[
{
    "id": 1,
    "name": "Juan",
    "edad": 20
},
{
    "id": 2,
    "nombre": "Pepe",
    "edad": 26
},
...
]

Я хочу заполнить свой select2 (используя lib ng-select2) этим ответом, но показывая nombre и edad, например: Juan - 20

Я получаю ответ правильно, но не могу прикрепить и показать его в select2, (я могу правильно воспроизвести примеры этой библиотеки, но это с жестко закодированными данными).

это моя попытка. в моем персон.сервисе 

getPersons(): Observable<Array<Select2OptionData>> {
return this.http.get<Array<Select2OptionData>>(this.API_URL);           
}

persons.component.ts 

export class PersonsComponent implements OnInit {

 public exampleData: Array<Select2OptionData>;

  constructor(public  personsService:  PersonsService) {}

 ngOnInit() { this.getPersons}

 getPersons(): void {
   this.personsService.getPersons().subscribe(
   persons => {this.exampleData = persons; 
               console.log(persons);} // the information shows correctly in console.
)
}

persons.component.html 

<ng-select2 [data]="exampleData"
        [(ngModel)]="value">
</ng-select2>

результат: select2 показывает 2 пустых строки, но без информации. Я знаю, что проблема связана с интерфейсом Select2OptionData (он использует id, текст), но я новичок в этом вопросе, так как я могу проанализировать или адаптировать свой ответ на Select2OptionData? я должен сделать это в сервисе или в component.ts ?? надеюсь, ты сможешь мне помочь.

1 Ответ

0 голосов
/ 03 ноября 2018
Атрибут

ng-select2 [data] ожидает Select2Data экземпляр .

Ваша служба, вероятно, должна возвращать что-то, что вообще не связано с Select2, например массив Person[], в котором вы определили Person как интерфейс с этими атрибутами: 

interface Person {
  id: number;
  name: string;
  edad: number;
}

Затем на стороне компонента вы можете использовать оператор map rxjs, например: 

this.personsService.getPersons().pipe(
  map((persons: Person[]) => persons.map((person: Person) => ({label: person.name, value: person.id})))
).subscribe((personsData: Select2Data) => {
  this.exampleData = personsData;
});

и измените свойство вашего компонента на правильный тип: 

public exampleData: Select2Data;
...