показывать только 1 объект из массива в mat-select angular - PullRequest
Новая
       6

показывать только 1 объект из массива в mat-select angular

0 голосов
/ 28 июня 2018

Я использую последнюю версию Angular JS.

Пример, который я использую (от создания групп опций): 

https://material.angular.io/components/select/examples

В этом примере HTML-код: 

<mat-form-field>
  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
    <mat-option>-- None --</mat-option>
    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                  [disabled]="group.disabled">
      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
        {{pokemon.viewValue}}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

Я пытаюсь показать только первый элемент массива в раскрывающемся списке. Я буду использовать этот массив групп «покемонов» в разных точках страницы, но пока хочу показать только 1 группу.

Я пытался: 

<mat-optgroup *ngFor="let group of pokemonGroups[0]" [label]="group.name">

Чтобы получить доступ только к первому элементу (Grass): 

 pokemonGroups: PokemonGroup[] = [
    {
      name: 'Grass',
      pokemon: [
        {value: 'bulbasaur-0', viewValue: 'Bulbasaur'},
        {value: 'oddish-1', viewValue: 'Oddish'},
        {value: 'bellsprout-2', viewValue: 'Bellsprout'}
      ]
    },
    {
      name: 'Water',
      pokemon: [
        {value: 'squirtle-3', viewValue: 'Squirtle'},
        {value: 'psyduck-4', viewValue: 'Psyduck'},
        {value: 'horsea-5', viewValue: 'Horsea'}
      ]
    },
    {
      name: 'Fire',
      disabled: true,
      pokemon: [
        {value: 'charmander-6', viewValue: 'Charmander'},
        {value: 'vulpix-7', viewValue: 'Vulpix'},
        {value: 'flareon-8', viewValue: 'Flareon'}
      ]
    },
    {
      name: 'Psychic',
      pokemon: [
        {value: 'mew-9', viewValue: 'Mew'},
        {value: 'mewtwo-10', viewValue: 'Mewtwo'},
      ]
    }
  ];

Я получаю ошибку: 

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'Peru'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngOnChanges

Чрезвычайно новый для Angular. Буду признателен за любую помощь / поддержку

Ответы [ 4 ]

0 голосов
/ 28 июня 2018

вы можете использовать решение @Amit Chigadani, просто проверьте перед нарезкой массив данных. 

   <div *ngFor="let group of (pokemonGroups? pokemonGroups.slice(0,1): [])" >
0 голосов
/ 28 июня 2018

если вы хотите показать только одну группу, y вы решили использовать *ngFor?
Вы можете напрямую использовать -
<mat-optgroup [label]="pokemonGroups[0].name">

0 голосов
/ 28 июня 2018

Вам нужно превратить объект обратно в массив, обернув его в []. Обновите ваш шаблон так: 

<mat-optgroup *ngFor="let group of [pokemonGroups[0]]" [label]="group.name">
0 голосов
/ 28 июня 2018

Вы можете просто использовать функцию slice в массиве, чтобы исключить все элементы, кроме первого 

<mat-optgroup *ngFor="let group of pokemonGroups.slice(pokemonGroups.length-1)" [label]="group.name">
...