angular - ngFor 类的第一个和最后一个实例

Question

我正在使用 Angular 4+。请注意： first 和 last 需要基于类实例，而不是元素。所以 ngFor 中的 let first = first 是行不通的。我目前导入了 jQuery 来处理这个问题，但想看看是否有办法不使用 jQ。

在组件 ts 文件中：

items: any = [{number: 0, text: 'blah blah'},{number: 0, text: 'blah blah'},{number: 1, text: 'blah blah'},{number: 1, text: 'blah blah'},{number: 1, text: 'blah blah'}, etc...

在 HTML 文件中：

<ion-row *ngFor="let item of items [ngClass]="'item-class-' + item.number">
  <ion-col>{{item.text}}</ion-col>
</ion-row>

现在我想要做的是获取一个类的第一个实例和最后一个 - 一旦我拥有它，我想设置它的样式或将一个类添加到行中。例如在 jQuery 中我会这样做：

$( 'ion-row.item-class-0' ).first().css( 'background-color', 'red' );
$( 'ion-row.item-class-1' ).first().css( 'background-color', 'red' );

Answer 1

更新答案：

模板 ：

<ion-row *ngFor="let item of items" [ngClass]="'item-class-' + item.number">
    <ion-col>{{item.text}}</ion-col>
  </ion-row>

组件.ts

import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({...})
export class HomePage {

    items: any = [{
        number: 0,
        text: 'blah blah'
    }, {
        number: 0,
        text: 'blah blah'
    }, {
        number: 1,
        text: 'blah blah'
    }, {
        number: 1,
        text: 'blah blah'
    }, {
        number: 1,
        text: 'blah blah'
    }];

    ngAfterViewInit() {
        $( 'ion-row.item-class-0').first().css( 'background-color', 'red' );
        $( 'ion-row.item-class-1').last().css( 'background-color', 'red' );
    }
}

它会为我工作试试这个：