任意嵌套数组的每个块

Question

https://svelte.technology/guide#each-blocks给出了每个块输出一个类似table的结构的例子：

<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 的语法可以在迭代之前 "reach into" 组件的数据。

我是不是遗漏了什么，或者 #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>

任意嵌套数组的每个块

Each blocks for arbitrary nested arrays

javascript

templates

multidimensional-array

svelte