Question

我有来自api的json响应：

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

我想用此响应填充我的select2（使用lib ng-select2），但显示nombre和edad，例如：Juan-20

我正确地收到了响应，但是无法将其附加并显示在select2中（我可以正确地推翻该lib的示例，但这是硬编码的数据）。

这是我的尝试。在我的个人服务中

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，text）上，但是我是angular的新手，那么我如何解析或调整对Select2OptionData的响应？我应该在服务中还是在component.ts中？希望你能帮助我。

Answer 1

ng-select2's [data] attribute expects a Select2Data instance。

您的服务可能应该返回与Select2完全无关的内容，例如一个Person[]数组，其中您将Person定义为具有这些属性的接口：

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

然后，在组件方面，您可以使用rxjs的map运算符，如下所示：

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;

从api填充Angular 6 ng-select2

1 个答案: