Angular7-自动填充ng-select

Question

我有一个带有URL中ID的视图。加载此视图时，我致电服务并获取所有用户数据，看起来类似于。

{
    "code": 0,
    "message": "",
    "body": {
        "id": 1,
        "name": "test",
        "profile": [
            {
                "id": 2,
                "description": "admin"
            },
            {
                "id": 1,
                "description": "user"
            }
        ]
    }
}

假设用户没有配置文件，那么select组件仅具有所有数组数据。在其他情况下，假设用户具有管理员配置文件，那么select组件具有所有阵列，但是admin是默认选择的。

在HTML中，我有

 <ng-select [multiple]="true"  name="perfiles" placeholder="{{ 'profile-placeholder' | translate }}"
        [(ngModel)]="perfiles">
        <ng-option *ngFor="let perfil of perfiles"  bindLabel="perfil.descripcion" [value]="perfil.id" >{{perfil.descripcion}}</ng-option>
      </ng-select>

结果是

问题在于该组件未显示任何数据。显然可以使用，一个用户有两个配置文件，但是我不知道如何显示描述。有帮助吗？

Answer 1

我认为您在html中打了一个错字：

    <ng-option *ngFor="let perfil of perfiles"  bindLabel="perfil.descripcion" [value]="perfil.id" >{{perfil.descripcion}}</ng-option>

应该是：

    <ng-option *ngFor="let perfil of perfiles"  bindLabel="perfil.description" [value]="perfil.id" >{{perfil.description}}</ng-option>

我已根据您的JSON将{{perfil.descripcion}}更改为{{perfil.description}}，将bindLabel="perfil.descripcion"更改为bindLabel="perfil.description"，现在应该可以使用。

Answer 2

我找到了解决方案。第一次，我需要使用Web服务获取数组中的所有元素。然后我们需要将所有元素保存在变量中。

//Declare a variable 
private allElements: any= [];
//Save web response data in a variable
this.allElements= response["body"];

我们需要做同样的事情才能将用户元素放入数组。我们需要用于搜索用户元素的新Web服务。

//Declare a variable 
private userElements: any= [];
//Save web response data in a variable. This response only has user data.
this.userElements= response["body"];

最后我们需要HTML。

 <ng-select [items]="allElements"  [multiple]="true" name="userElements" bindLabel="description"
 [(ngModel)]="userElements">
 </ng-select>

这将在allElements上创建一个循环以填充选择组件并显示userElements为默认值。