如何根据数据字段动态显示我的元素？

Question

我的数据在下面：

  fakeData = [
        {
            "option_name" : 'optionA',
            "display_line_num" : 1
      },
        {
            "option_name" : 'optionB',
            "display_line_num" : 2
      },
        {
            "option_name" : 'optionC',
            "display_line_num" : 2
      },
        {
            "option_name" : 'optionD',
            "display_line_num" : 3
      },
        {
            "option_name" : 'optionE',
            "display_line_num" : 4
      },
        {
            "option_name" : 'optionF',
            "display_line_num" : 4
      }
    ];

我正在尝试让我的 html 看起来像 desired look

display_line_num 表示元素应该放在哪一行。 我对如何解决这个问题很迷茫。

my try here 我试图创建一个哈希图，其中键是行号，值是该行号中有多少个选项。然而，我还是迷路了。 我被困了很长时间，我想知道有什么好的方法可以解决这个问题？

我知道我们可能需要使用 *ngFor，例如

....

但是会有一个嵌套的 for 循环，其中一行可以有多个选项，有时一行只有一个选项。我该如何处理这些情况？

谁能给我一个提示？ 谢谢！

Answer 1

我已经更新了你的mapDatas 函数：

mapDatas( data: any ){

  const dataObj:any = {}

  this.fakeData.forEach(data => {
    const {display_line_num: key, option_name: value} = data;
    dataObj[key] = dataObj[key] ? [...dataObj[key], value] : [value]
  });

  return Object.values(dataObj);

}

这里我们遍历fakeData数组并将每个项目的option_name值推送到嵌套数组中，每个数组的索引是每个项目的display_line_num。因此，当多个元素具有相同的display_line_num 时，它们将被放入同一个数组中。 最后，我们返回转换为数组的对象。现在您可以在模板中使用 ngFor 遍历每个项目。