Ionic/Angular - Select option is not marked, options loaded from API

Question

I have created select, options are loaded from API, the problem is when I have some value that was set before, now I want to display this in this select I don't see this value, marked option is visible after click on select. Why is that? My code.

<form [formGroup]="form">
  <ion-item class="transparent">
    <ion-select cancelText="Cancel" formControlName="type">
      <ion-select-option *ngFor="let type of types" [value]="type">{{type.name}}</ion-select-option>
    </ion-select>
  </ion-item>
</form>

ngOnInit() {
    this.form = this.fb.group({
        type: new FormControl('')
    })
    this.service.getTypes().then((types) => {
        this.types= types;
        this.form.controls['type'].setValue(this.types[0]);
    });
  }

export class Type{
  public id: number;
  public name: string;
}

Please advise, is it possible to display this data.

Answer 1

in your ion-select-option the field value must to have string, not an object or Integer like you are trying, to linked it and parse the Integer value id to string you can make somenthing like: ([value]="'type.id'")

<ion-select-option *ngFor="let type of types" [value]="'type.id'">{{type.name}}</ion-select-option>

Answer 2

I used almost your exact same in this Stackblitz demo and everything seems to be working fine so there must be something wrong somewhere else in your code that is not shown in your question.

Feel free to fork the Stackblitz demo to see if you can reproduce the issue there.

This is the code of the component:

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
import { Item } from "../../models/item.model";
import { ItemsService } from "../../services/items.service";

@Component({
  selector: "app-home",
  templateUrl: "./home.page.html",
  styleUrls: ["./home.page.scss"]
})
export class HomePage implements OnInit {
  public form: FormGroup;
  public items: Array<Item>;

  constructor(
    private formBuilder: FormBuilder,
    private itemsService: ItemsService
  ) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      item: new FormControl("")
    });

    this.itemsService.getItems().then(items => {
      this.items = items;

      // Select the second item by default
      this.form.controls["item"].setValue(this.items[1]);
    });
  }
}

And this is the code of the view:

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <form [formGroup]="form">
    <ion-list>
      <ion-item>
        <ion-label>Item</ion-label>
        <ion-select cancelText="Cancel" formControlName="item">
          <ion-select-option *ngFor="let item of items" [value]="item">
            {{ item.name }}
          </ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>
  </form>
</ion-content>