ngFor類的第一個和最後一個實例執行此操作

Question

我正在使用Angular 4+。請注意：第一個和最後一個需要基於類實例，而不是元素。所以先讓一個先在ngFor中不起作用。我目前導入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> 

component.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'); 
    } 
} 

它會爲我工作試試這個：