如何使用 ngFor 遍历数组的一部分？

Posted 2023-02-23

【中文标题】如何使用 ngFor 遍历数组的一部分？

【英文标题】：How do I loop over a slice of an array using ngFor?

【发布时间】：2022-01-19 23:56:43

【问题描述】：

我正在创建一个带有手风琴按钮的常见问题页面，在子标题下有一组按钮。我使用 faq.html 文件中的 ngFor 语句设计了它。

<h1>Frequently Asked Questions</h1>
<div *ngFor="let item of data; let i = index;">
    <button class="accordion" (click)="toggleAccordion($event, i)"> item.parentName </button>
    <div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive">
    <p> child.propertyName </p>
</div>

这是 faq.ts 文件的 sn-p。

import  Component, OnInit  from '@angular/core';

@Component(
  selector: 'app-faq',
  templateUrl: './faq.html',
  styleUrls: ['./faq.scss']
)
export class FaqComponent implements OnInit 
  data: any = [
    
      parentName: 'Question 1A',
      childProperties: [ propertyName: 'Answer 1A' ],
    ,
    
      parentName: 'Question 2A',
      childProperties: [ propertyName: 'Answer 2A' ],
    ,
    
      parentName: 'Question 3A',
      childProperties: [ propertyName: 'Answer 3A' ],
    ,
    
      parentName: 'Question 1B',
      childProperties: [ propertyName: 'Answer 1B' ],
    ,
    
      parentName: 'Question 2B',
      childProperties: [ propertyName: 'Answer 2B' ],
    ,
  ];

我想在 A 部分（问题 1A、2A 和 3A）和 B 部分（问题 1B 和 2B）上放置子标题。我想我可以在 faq.html 的 ngFor 语句中使用 slice，但是代码不会编译。

我试过这个切片管：

<div *ngFor="let item of data | slice:0:2; let i = index;">

我应该改变什么来编译和分解常见问题部分？切片管是要走的路吗？

【参考方案1】：

我必须更改 html 才能以不同的方式访问属性并编译：

<div *ngFor="let item of data; let i = index;">
    <button class="accordion" (click)="toggleAccordion($event, i)"> item['parentName'] </button>
    <div class="panel" *ngFor="let child of item['childProperties'] | slice:0:2; let i = index;" hide="!item.isActive">
    <p> child['propertyName'] </p>
</div>

【参考方案2】：

切片数据

这里的问题是切片管道以unknown 类型返回您的数据。有几种方法可以解决这个问题：

$任何

<p *ngFor="let item of data | slice:2:4">
   $any(item).parentName 
</p>

括号表示法

<p *ngFor="let item of data | slice:2:4">
   item['parentName'] 
</p>

一个函数

slicedData(data : any[]) : any[] 
  return data.slice(2,4)

<p *ngFor="let item of slicedData(data)">
   item['parentName'] 
</p>

您可能希望正确键入数据，而不是使用任何数据。毕竟它被称为 Typescript 是有原因的。

以下是Stackblitz 中的一些示例。

【讨论】：

谢谢。我会试试这个。

【参考方案3】：

您可以添加一个*ngIf 并检查是否i < 3：

<h1>Frequently Asked Questions</h1>
<div *ngFor="let item of data; let i = index;">
  <ng-container *ngIf="i < 3">
    <button class="accordion" (click)="toggleAccordion($event, i)"> item.parentName </button>
    <div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive">
    <p> child.propertyName </p>
  </ng-container>
</div>

【参考方案4】：

谢谢大家的帮助。我将 faq.html 更改为：

<h1>Frequently Asked Questions</h1>
<h2>General</h2>
<div *ngFor="let item of data; let i = index;">
  <ng-container *ngIf="i < 3">
    <button class="accordion" (click)="toggleAccordion($event, i)"> item.parentName </button>
    <div class="panel" hide="!item.isActive">
    <p> item.childName </p>
</div>

它成功了。