Блог

Я создал select, параметры загружаются из API, проблема в том, что когда у меня есть какое-то значение, которое было установлено ранее, теперь я хочу отобразить это в этом выборе, я не вижу этого значения, отмеченный параметр виден после нажатия на select. Почему это так? Мой кодекс.

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

Пожалуйста, посоветуйте, возможно ли отобразить эти данные.

в вашем ion-select-option значение поля должно иметь строку, а не объект или целое число, как вы пытаетесь, чтобы связать его и проанализировать идентификатор целочисленного значения в строку. вы можете сделать что-то вроде: ([value]=»‘type.id «»)

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

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

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

Это код компонента:

 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]);
    });
  }
}
 

И это код представления:

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