CODEWITHSUNDEEP
angularangular-materialmaterial-design
dataviews
dataviews

Reputation: 3100

only show 1 object from array in mat-select angular

I am using the latest version of Angular JS.

The example I am using is from (creating groups of options): 

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

In the example, the HTML code is:

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

I am trying to only show the first element of the array within the drop down. I will be using this array of "pokemon" groups at different points in the page, but I want to only show 1 group for now.

I have tried:

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

In order to access only the first element (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'},
      ]
    }
  ];

The error I get:

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

Extremely new to Angular. Would appreciate any help / support

Upvotes: 0

Views: 1678

Answers (4)

Sameer
Sameer

Reputation: 519

you can use @Amit Chigadani solution just check before slicing data array.

   <div *ngFor="let group of (pokemonGroups? pokemonGroups.slice(0,1): [])" >

Upvotes: 0

Teddy Sterne
Teddy Sterne

Reputation: 14221

You need to turn the object back into an array by wrapping it in []. Update your template to be:

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

Upvotes: 1

Avinash
Avinash

Reputation: 1243

if you want to show only one group, y are you opting to use *ngFor?
you can directly use -
<mat-optgroup [label]="pokemonGroups[0].name">

Upvotes: 2

Amit Chigadani
Amit Chigadani

Reputation: 29715

You could simply use slice function on array to exclude all the items except first

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

Upvotes: 0

Related Questions