Question

我正在使用角度4和弹簧启动，我将所有记录作为一个列表从弹簧启动到角度4但是在角度形式我只获得单个对象数据，如何在搜索框中列出多个值？

component.ts ：在这个组件中，我得到所有的值，但显示单个数据！

字符= []; 字符= [];

 ngOnInit() {
    this.drugservice.getval().subscribe(
        data => {
            this.chars.data,
            this.characters = [
                {value: data[0].id},
                {label: data[0].name}
            ],
            alert(data[0].name)
        },
        err => {
            console.log('Error Occured ');
        });
}

ang.html：

<div class="col-sm-12 col-xl-4">            
   <ng-select [ngClass]="'ng-select'" [options]="characters"  formControlName="selectedCharacter"></ng-select>              
</div>

后端重新运行对象值：

[
    {
        "id": 1,
        "name": "ak"
    },
    {
        "id": 2,
        "name": "java"
    }
]

Answer 1

您的代码存在一些问题，其中大部分都在subscribe()处理程序中。首先，逗号使它变得非常奇怪，但我猜你正在尝试这样做：

this.drugservice.getval().subscribe(data => {
  this.chars.data, this.characters = [{value:data[0].id},{label:data[0].name}];
  alert(data[0].name);
});

此代码的一个问题是您只使用data[0]，因此如果data包含多个对象，则您只对第一个对象执行某些操作。也许你想做这样的事情：

this.drugservice.getval().subscribe(data => {
  this.characters = data.map(obj => ({ value: obj.id, label: obj.name }));
});

或者更积极的方式是：

this.drugservice
  .getval()
  .map(data => data.map(obj => ({ value: obj.id, label: obj.name })))
  .subscribe(data => this.characters = data);

通过使用map()运算符，您可以将data数组中的所有对象映射到{ value: ..., label: ... }结构。

最后但并非最不重要的是，如果你正在使用ng-select，你应该绑定到items而不是options：

<ng-select [ngClass]="'ng-select'" [items]="characters" 
           formControlName="selectedCharacter">                             
</ng-select>

但根据ng-select的文档，只要您提供正确的bindValue属性，就不需要将对象映射到某个结构，因此您可能需要查看进入那个。

如何从角4显示多个值？

1 个答案: