时间戳

首页 > 解决方案 > 以角度创建数组对象的数组

arrays - 以角度创建数组对象的数组

问题描述

我试图获得最好的解决方案，但不知道如何去做。

任务

有 4 个不同的多选下拉菜单，用户可以选择每个下拉菜单的任意数量的不同值，并通过保存按钮创建一个框（限制为 7 个）。

结构体

> dropdown1
  a1,a2,a3 

> dropdown2
  b1,b2,b3

> dropdown3
  c1,c2,c3

> dropdown4
  d1,d2,d3

1 个下拉菜单的代码

  /* dropdown dp1 */
  selecteddp1 = [];
  dp1Loading = false;
  dp1: any[] = [];
  dp1Name = ["a1", "a2", "a3", "a4"];

  selectAll() {
    this.selecteddp1 = this.dp1.map(x => x.name);
  }

  unselectAll() {
    this.selecteddp1 = [];
  }

  private loaddp1() {
    this.dp1Loading = false;
    this.dp1Name.forEach((c, i) => {
      this.dp1.push({ id: i, name: c });
    });
  }
  /* dropdown dp1 */

/* button event */
createQuery() {
    this.selecteddp1.forEach(x => {
      this.query.dp1.push(x);
    });
  }
/* button event */

在按钮事件上，保存选定的 dp1 值以进行查询。

query:[] = [{
    dp1: [],
    dp2: [],
    dp3: [],
    dp4: []
  }];

结果（根据用户选择说明）

<div class="box1">
  <ul>
    <li>dp1-a1</li>
    <li>dp2-b1</li>
    <li>dp2-b2</li>
    <li>dp3-a1</li>
    <li>dp3-c2</li>
  </ul>
</div>

我的方法将是错误的，请提出更好的想法，如何将选定的值保存在对象数组中以及如何查看它。TIA

编辑 我需要使用下拉列表的选定值创建框。一旦用户点击保存按钮。

在我看来，查询应该是这样的

query:[] = [{
        dp1: [a1,a2],
        dp2: [b1],
        dp3: [c2],
        dp4: [d3]
      }],
      [{
        dp1: [a1,a2],
        dp2: [b1],
        dp3: [c2],
        dp4: [d3]
      }];

标签： arraysangular

解决方案

您可以像这样创建查询数组：

  query = [{
    dp1: ['a1','a2'],
    dp2: ['b1'],
    dp3: ['c2'],
    dp4: ['d3']
  }, {
    dp1: ['a1','a2'],
    dp2: ['b1'],
    dp3: ['c2'],
    dp4: ['d3']
  }];

你的 HTML 应该是：

<div *ngFor="let dropdownGroup of query">
  <select *ngFor="let dropdown of objectKeys(dropdownGroup)">
    <option *ngFor="let option of dropdownGroup[dropdown]" [value]="option">{{option}}</option>
  </select>
</div>

HTML 中的objectKeys是类的属性，等于object.keys：

objectKeys = Object.keys;

你可以在这个StackBlitz中看到这一切

推荐阅读