无法使用车把遍历多维数组

Question

正在查看我的数据：

data: {
    content: [
    [
    "School Name",
    "Location",
    "Type",
    "No. eligible pupils",
    "Average points per student",
    "Average points per exam entry",
    "% obtaining two facilitating subjects"
    ],
    [
    "Colchester Royal Grammar School",
    "Colchester",
    "State",
    "349",
    "1428",
    "263.3",
    "77%"
    ], and so on...
 ]
}

我正在尝试遍历这个数组数组，以创建一个 table。因此，对于每个数组，我需要将其包装在 <tr></tr> 中，对于每个数组中的每个元素，我需要将其包装在 <td></td> 中。我将需要区分第一行以使用 <thead> 和 <th>，但目前我正在努力了解正确的结构。

我的代码所做的是只创建一个包含所有内容的 <td>，而不是多个 <tr> 或 <td>。

        {{#each data.content}}

            <tr>

                {{#each this}}
                    <td>{{ this }}</td>
                {{/each}}

            </tr>

        {{/each}}

Answer 1

您不能直接在您的内部使用数据 template.because 您正在将数据对象传递给已编译的模板 function.so 您应该使用它来引用当前上下文。

最好使用块参数来避免更多的这个reference.which会使代码更难理解

没有块参数

{{#each this.content}} 
     <tr>
        {{#each this}} 
            <td>{{ this }}</td> 
        {{/each}} 
     </tr>
 {{/each}}

通过使用块参数，

{{#each this.content as | rowKey, row |}} 
         <tr>
            {{#each row as | colKey, column|}} 
                <td>{{ column }}</td> 
            {{/each}} 
         </tr>
 {{/each}}

模板越大越有优势

无法使用车把遍历多维数组

Cannot loop through multidimensional array with handlebars

javascript

multidimensional-array

handlebars.js