Angular7 - автозаполнение ng-select - PullRequest
Новая
       11

Angular7 - автозаполнение ng-select

0 голосов
/ 11 января 2019

У меня есть вид с идентификатором в URL. При загрузке этого представления я вызываю сервис и беру все пользовательские данные, выглядит примерно так. 

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

Предположим, что у пользователя нет профилей, поэтому у выбранного компонента есть только все данные массива. В другом случае предположим, что у пользователя есть профиль администратора, поэтому в выбранном компоненте есть весь массив, но по умолчанию выбрано 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>

И результат.

ng-select

Проблема в том, что компонент не показывает никаких данных. Видимо работает, у пользователя есть два профиля, но я не знаю, как показать описание. Любая помощь?

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Я нашел решение. В первый раз мне нужно получить все элементы в массиве с веб-сервисом. Затем нам нужно сохранить все элементы в переменной. 

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

Нам нужно сделать то же самое, чтобы получить пользовательские элементы в массиве. Нам нужен новый веб-сервис для поиска пользовательских элементов. 

//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>

Это создает цикл над всеми элементами для заполнения выбранного компонента и отображения пользовательских элементов по умолчанию.

0 голосов
/ 11 января 2019

Я думаю, что вы сделали опечатку в своем 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>

Я изменил {{perfil.descripcion}} на {{perfil.description}} и bindLabel="perfil.descripcion" на bindLabel="perfil.description" в соответствии с вашим JSON, теперь это должно работать.

...