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

Question

我正在创建一个带有手风琴按钮的常见问题解答页面，子标题下有一组按钮。我使用 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，但代码无法编译。

我尝试了这个切片管：

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

我应该更改什么才能使其编译并分解常见问题解答部分？切片管是正确的选择吗？

Answer 1

分割您的数据

这里的问题是切片管道以

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 中的一些示例。

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>

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

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

并且成功了。

Answer 5

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

数据：任何[] = [ { ParentName: '问题 1A', childProperties: [{ propertyName: '答案 1A' }], }, { ParentName: '问题 2A', childProperties: [{ propertyName: '答案 2A' }], }, { ParentName: '问题 3A', childProperties: [{ propertyName: '答案 3A' }], }, { ParentName: '问题 1B', childProperties: [{ propertyName: '答案 1B' }], }, { ParentName: '问题 2B', childProperties: [{ propertyName: '答案 2B' }], }, ];