如何使用API中的数据在ion select中设置条件默认值

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-country-select',
  templateUrl: './country-select.component.html',
  styleUrls: ['./country-select.component.scss'],
})
export class CountrySelectComponent implements OnInit {
  countries: any[] = [];
  selectedCountry: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://api.example.com/countries').subscribe((data: any[]) => {
      this.countries = data;
      // 假设API返回的数据中有一个字段叫做"userPreference"表示用户的偏好国家
      this.selectedCountry = this.countries.find(country => country.code === this.getUserPreference());
    });
  }

  getUserPreference() {
    // 这里应该是获取用户偏好的逻辑，比如从localStorage或者服务端获取
    return 'US'; // 假设用户偏好是美国
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>Country Select</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label>Choose a Country</ion-label>
    <ion-select [(ngModel)]="selectedCountry" interface="popover">
      <ion-select-option *ngFor="let country of countries" [value]="country">
        {{country.name}}
      </ion-select-option>
    </ion-select>
  </ion-item>
</ion-content>

loading: boolean = true;

ngOnInit() {
  this.http.get('https://api.example.com/countries').subscribe((data: any[]) => {
    this.countries = data;
    this.selectedCountry = this.countries.find(country => country.code === this.getUserPreference());
    this.loading = false;
  });
}

<ion-content *ngIf="!loading">
  <!-- ... -->
</ion-content>
<ion-spinner *ngIf="loading"></ion-spinner>