通过Angular获取.NET Core API数据后如何在Ionic下拉框使用

我通过Angular从.NET Core API获取数据，当前流程运行正常，得到的响应结构如下：

{
    "data": [
        {
            "Id": 1,
            "Name": "Jeffreys Bay",
            "ProvinceID": 1,
            "Longitude": 24.91667,
            "Latitude": -34.03333
        },
        {
            "Id": 2,
            "Name": "Heidelberg",
            "ProvinceID": 3,
            "Longitude": 28.38418,
            "Latitude": -26.491
        },
        // 其余数据省略，结构和上面一致
    ],
    "totalCount": -1,
    "groupCount": -1,
    "summary": null
}

我想要将该响应对象中的data数组用到Ionic下拉框中，但不知道该如何完成这一步。我之前习惯操作JSON格式数据，可以正常访问任意字段，但是查到的各类解决方案差异很大，反而让我更加困惑。我的专业背景是土木工程师，接触这类新的开发方法时偶尔会遇到障碍。

你只需要按照下面3个基础步骤操作即可完成需求：

1. 组件中定义存储变量 #

在对应页面的.ts组件文件中定义存储区域列表和选中值的变量，建议先定义数据类型方便后续操作：

// 定义区域数据类型（可选，推荐添加）
interface Area {
  Id: number;
  Name: string;
  ProvinceID: number;
  Longitude: number;
  Latitude: number;
}

// 在组件类中定义变量
areaList: Area[] = [];
selectedAreaId: number; // 存选中的区域ID，也可以定义为Area类型存整个对象

2. 接口请求成功后赋值 #

你请求.NET Core接口拿到响应后，直接把响应里的data字段赋值给上面定义的areaList即可：

// 示例为HttpClient请求的写法，替换成你现有请求逻辑即可
this.http.get('你的API接口地址').subscribe((res: any) => {
  this.areaList = res.data;
});

3. 模板中绑定Ionic下拉框 #

在对应页面的.html模板文件中，用ion-select组件绑定数组渲染下拉选项：

<ion-item>
  <ion-label>选择区域</ion-label>
  <ion-select [(ngModel)]="selectedAreaId" placeholder="请选择">
    <ion-select-option *ngFor="let area of areaList" [value]="area.Id">
      {{ area.Name }}
    </ion-select-option>
  </ion-select>
</ion-item>

• 如果你需要拿到选中区域的全部字段，把[value]="area.Id"改成[value]="area"，同时把ts里的selectedAreaId类型改为Area | undefined即可
• 如果无法使用[(ngModel)]双向绑定，确认你的页面模块已经导入了FormsModule

内容的提问来源于stack exchange，提问作者Daantjiekat