Question

我正在尝试填充角度下拉列表。我有一组需要显示在下拉菜单中的值。这是我的代码。

rolesArr: SelectItem[];

for (let i = 0; i < user.roles.length; i ++) {
    this.rolesArr = [
     { label: user.roles[i].name, value: i }
    ];
}

<div class="input-container">
     <label for="role">Role*</label>
     <p-dropdown [options]="rolesArr" formControlName="role" id="role" placeholder="Please select"></p-dropdown>
</div>

我目前只看到数据集中的最后一个值。

这是我的数据集

{
  "roles": [
    {
      "id": 1,
      "name": "System Admin",
      "parent": "00000000-0000-0000-0000-000000000000"
    },
    {
      "id": 2,
      "name": "Internal Account Manager",
      "parent": "00000000-0000-0000-0000-000000000000"
    },
    {
      "id": 3,
      "name": "CAT Manager",
      "parent": "00000000-0000-0000-0000-000000000000"
    }
  ]
}

Answer 1

这正是您当前代码所期望的。小心您的for循环。您将每个循环重新分配数组给当前元素。相反，您应该使用this.rolesArr.push({label:user.roles[i].name,value:i})

Answer 2

您没有将阵列推入。您正在设置数组的0值。尝试一下。

for (let i = 0; i < user.roles.length; i ++) {
    this.rolesArr.push(
     { label: user.roles[i].name, value: i }
    );
}

Answer 3

每次迭代rolesArr时，您都在重新分配user.roles。

将数组分配给rolesArr。
调用rolesArr.push()方法。

rolesArr: SelectItem[] = [];

for (let i = 0; i < user.roles.length; i ++) {
    this.rolesArr.push({ label: user.roles[i].name, value: i });
}

从Angular中的数据集中填充下拉列表

3 个答案: