显示对象中的键(Displaying Keys in an Object)
优质
小牛编辑
123浏览
2023-12-01
您可以使用#each-in helper在对象中显示键,并为对象中传递的每个键迭代一次。
语法 (Syntax)
<ul>
{{#each-in array_name as |block-param| }}
<li>{{block-param}}</li>
{{/each}}
</ul>
在上面的代码中,模板迭代array_name ,其中包括对象和指定为block-param的对象中的每个键。
例子 (Example)
下面给出的示例使用#each-in helper显示对象中的键。 要显示项目,请使用以下命令创建组件 -
ember g component store-categories
现在打开在app/component/下创建的store-categories.js以及以下代码 -
import Ember from 'ember';
export default Ember.Component.extend ({
willRender() {
this.set('typesOfvehicles', {
'Cars': ['Ferrari', 'Audi', 'BMW'],
'Motor bikes': ['Harley-Davidson', 'Yamaha','Honda']
});
}
});
使用以下代码在app/templates/下创建名为store-categories.hbs app/templates/ -
<ul>
{{#each-in typesOfvehicles as |category products|}}
<li>{{category}}
<ol>
{{#each products as |product|}}
<li>{{product}}</li>
{{/each}}
</ol>
</li>
{{/each-in}}
</ul>
要列出对象中的键,请在app/templates/下创建的application.hbs文件中使用以下代码 -
<p>This is Displaying the Keys in an Object:</p>
{{store-categories}}
{{outlet}}
输出 (Output)
运行ember服务器,您将收到以下输出 -