Question

我有一个Angular 5下拉列表可以很好地处理硬编码数据，但我需要将其切换为实时数据。问题是实时数据是普通数组。

这是目前的工作

HTML

<select...
  <option *ngFor="let activityType of activityTypes" [ngValue]="activityType.Id">
        {{activityType.Activity}}
  </option>

打字稿组件

activityTypes: any[];

this.activityTypes = [
        { Id: 1, Activity: "Select One" },
        { Id: 2, Activity: "Insert" },
        { Id: 2, Activity: "Update" },
        { Id: 3, Activity: "Delete" },          
];

但是，这是我的问题，我从服务中提取数据，数据看起来像这个数组

this.activityTypes v["INSERT", "UPDATE"]
                      0: "INSERT"
                      1: "UPDATE"

click to see dev tool image output

现在，如何使用数组绑定到下拉列表？ 显然，我希望将值设置为＆＃34; 0＆＃34;，＆＃34; 1＆＃34;数组...然后是DISPLAY（这是我在硬编码示例中的活动）我希望它能够保持＆＃34; INSERT＆＃34;和＆＃34;更新＆＃34; ...

Answer 1

您可以使用数组索引作为选项的值，将数据用作标签

<select...
  <option *ngFor="let activityType of activityTypes; let i = index" [ngValue]="i">
        {{activityType}}
  </option>

解决方案2：您可以创建对象数组：

this.activityTypes = this.activityTypes.map((currElement, index) => {
  let obj = {
    Id: index,
    Activity: currElement
  };
  return obj;
});

角度下拉从硬编码数据切换到服务的实时数据

1 个答案: