如何使用ngFor循环遍历数组的切片？

Question

我正在创建一个带有手风琴按钮的FAQ页面，其中包含子标题下的按钮组。我使用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文件的一部分代码示例。

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，但代码无法编译。

我尝试了这个slice管道：

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

我该做哪些改变才能使其编译并分割FAQ部分？使用管道符“|”切片是否可行？

- PyNerd

Answer 1

切片您的数据

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

$any

<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>

< p>你可能想要正确地输入你的数据，而不是使用任何类型。毕竟，它被称为 Typescript。

这里有一些在Stackblitz上的示例。

- H3AR7B3A7

---

谢谢。我会试一下。 - PyNerd

Answer 2

我需要更改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>

- Mana S

Answer 3

感谢大家的帮助。我已经将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>

它成功了。

- PyNerd

Answer 4

您只需添加一个*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>

- NeNaD

Answer 5

在你的.ts组件中，将变量声明如下

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' }],
    },
];

- John

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community