Question

我正在尝试获得最佳解决方案，但没有任何线索。

任务

有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]
      }];

Answer 1

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

  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

中一起看到这一切

创建角度数组对象的数组

1 个答案: