Question

https://svelte.technology/guide#each-blocks给出了输出表格式结构的每个块的示例：

<div class='grid'>
  {{#each rows as row, y}}
    <div class='row'>
      {{#each columns as column, x}}
        <code class='cell'>
          {{x + 1}},{{y + 1}}:
          <strong>{{row[column]}}</strong>
        </code>
      {{/each}}
    </div>
  {{/each}}
</div>

该示例需要此特定结构：

{
  "columns": [
    "foo",
    "bar",
    "baz"
  ],
  "rows": [
    {
      "foo": "a",
      "bar": "b",
      "baz": "c"
    },
    {
      "foo": "d",
      "bar": "e",
      "baz": "f"
    },
    {
      "foo": "g",
      "bar": "h",
      "baz": "i"
    }
  ]
}

如果事先不知道列，还是更一般地说，如果每行可能有不同的长度，是否有办法使用此功能？例如。（对于后者）：

{
  "rows": [
    [1],
    [2, 3, 4],
    [5, 6]
  ]
}

我没有看到任何指示#each的语法可以在迭代之前“到达”组件的数据，就像它一样。

我错过了什么，或者#each是不可能的内循环？如果不可能，还有什么其他方法可以做到这一点？（例如，您可以使用函数迭代内部数组并嵌套辅助模板吗？）

Answer 1

我刚刚在这里学习了文档，但是我可以告诉你应该能够将row视为cell的列表：

<div class='grid'>
  {{#each rows as row, y}}
    <div class='row'>
      {{#each row as cell, x}}
        <code class='cell'>
          {{x + 1}},{{y + 1}}:
          <strong>{{cell}}</strong>
        </code>
      {{/each}}
    </div>
  {{/each}}
</div>

每个块都用于任意嵌套数组

1 个答案: