如何根据注入的组件对组件中的 *ngFor 进行切片？答案

【问题标题】：How do I slice *ngFor in a component based on the components it is injected into?如何根据注入的组件对组件中的 *ngFor 进行切片？
【发布时间】：2021-09-02 10:54:21
【问题描述】：

以下代码是我需要在其他组件中注入的组件：

<div class="row">
    <div class="col-12 [...]" *ngFor="let course of courses">
        <div class="card">
            [...]
        </div>
    </div>
</div>

问题在于，在它注入的其中一个组件中，我需要在 ngFor 中应用 | slice:0:4 以显示更少的数据。出于这个原因，我修改了子组件并使其将来自父组件的数据发送到子组件。所以我把.row和.col-12的div去掉，放到父组件中，这样我就可以只在需要的父组件中使用切片了。

<div class="row">
    <div class="col-12 [...]" *ngFor="let course of courses | slice:0:4">
        <app-child-component [course]="course"></app-child-component>
    </div>
</div>

子组件现在是这样的：

<div class="card">
    [...]
</div>

现在的问题是我需要将 CSS 类应用到子组件的 .row 必须在任何地方都可见但是这样我必须修改每个父组件的 .row，所以更多无用的代码。我还假设这样我并没有按照预期的方式使用 Angular 的组件概念。

有没有一种方法可以使用 | slice 以及从单个父组件“发送”到子组件的方式，就像我现在在 <app-component [corso]="corso"></app-component> 中使用 [corso]="corso" 所做的那样？

希望我解释得很好。谢谢。

【问题讨论】：

您可以将切片编号从父组件传递给子组件@Input
@Sameer 所以将| slice 中的:start 和:end 设置为变量？
我不确定我是否完全理解您需要做什么，但如果我要进行一些复杂的切片，我会在新数组中的 .ts 一侧进行，然后使用做一个*ngFor。也许您可以创建一个包含您需要的所有切片信息的类并将其传递给组件

标签： javascript html css angular typescript

【解决方案1】：

//Child component ts
@Input() sliceStart = 0; //default to `0` if not passed
@Input() sliceEnd = 4; //default to `4` if not passed

courses = ['HTML', 'CSS', 'Javascript', 'Angular'];

<!-- Child component html -->
<div *ngFor="let course of courses | slice: sliceStart:sliceEnd">
  {{course}}
</div>

<!-- Parent component html -->
<app-child-component [sliceEnd]="2"></app-child-component>

Stacblitz example

【讨论】：

正是我想要的，谢谢！