Angular 4如何仅对分组数据使用slice管道？

嘿，我注意到你尝试给分组后的Angular数据应用slice管道，但代码里有个小细节没处理对——内层的slice管道放错位置啦！让我帮你修正一下，顺便解释正确的用法。

原代码的问题 #

你在内层<li>标签后单独写了| slice:0:1，但Angular的*ngFor管道需要和遍历的数据源放在同一个表达式中，这样管道才能正确作用于要遍历的数组，单独放在标签后是无法生效的。

修正后的代码 #

HTML 代码

<h4>NgFor (grouped)</h4> 
<ul *ngFor="let group of peopleByCountry | slice:0:1 ">
  <li>{{ group.country }}</li> 
  <ul>
    <!-- 把slice管道移到*ngFor的表达式里，直接作用于group.people数组 -->
    <li *ngFor="let person of group.people | slice:0:1"> {{ person.name }} </li>
  </ul>
</ul>

TypeScript 代码

peopleByCountry: any[] = [
  { 'country': 'UK', 'people': [ { "name": "Douglas Pace" }, { "name": "Mcleod Mueller" } ] },
  { 'country': 'US', 'people': [ { "name": "Day Meyers" }, { "name": "Aguirre Ellis" }, { "name": "Cook..." } ] }
];

代码说明 #

• 外层的slice:0:1作用于peopleByCountry数组，会只渲染第一个分组（也就是UK这个国家的分组）。
• 内层的slice:0:1作用于每个分组里的people数组，会只渲染该分组下的第一个人。

如果需要调整截取的范围，比如显示前2个国家分组、每个分组显示前2个人，只需要修改slice的参数即可，比如把slice:0:1改成slice:0:2。

内容的提问来源于stack exchange，提问作者Manish Salunke