显示项目列表（Displaying List of Items）

您可以使用#each帮助程序显示数组中的项列表，并为数组中的每个项迭代一次。

语法 (Syntax)

<ul>
   {{#each array_name as |block-param| }}
      <li>{{block-param}}</li>
   {{/each}}
</ul>

在上面的代码中，模板迭代array_name ，其中包括对象和指定为block-param的数组中的每个项。

例子 (Example)

下面给出的示例使用#each帮助程序显示项目列表。 要显示项目，请使用以下命令创建组件 -

ember g component group-list

接下来，打开在app/component /下创建的group-list.js以及以下代码 -

import Ember from 'ember';
export default Ember.Component.extend ({
   arrayOFgroup:['apple','pineapple','banana']
});

使用以下代码在app/templates/下创建名为group-list.hbs app/templates/ -

<ul>
   {{#each arrayOFgroup as |fruit|}}
      <li>{{fruit}}</li>
   {{/each}}
</ul>

要列出数组中的项目，请使用app/templates/下创建的application.hbs文件中的以下代码 -

<p>List of Items:</p>
{{group-list}}
{{outlet}}

输出 (Output)

运行ember服务器，您将收到以下输出 -