2

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？如果不可能，还有其他方法可以做到吗？（例如，您可以使用函数来迭代内部数组并嵌套辅助模板吗？）

4

1 回答 1

3

我只是从这里的文档中学习，但据我所知，您应该能够将其row视为 s 列表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>
于 2017-02-25T14:39:30.133 回答