ngPour la première et la dernière instance d'une classe Procédez ainsi

Question

J'utilise Angular 4+. S'il vous plaît noter: le premier et le dernier doit être basé sur l'instance de classe, pas l'élément. Donc un let first = first dans le ngFor ne fonctionnera pas. J'ai actuellement importé jQuery pour gérer ceci mais je voudrais voir s'il y a un moyen de ne pas utiliser jQ.

Dans le fichier ts composant:

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

Dans le fichier HTML:

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

Maintenant ce que je veux faire est de saisir la première instance d'une classe et dernier - une fois que je l'ai Je veux le styler ou ajouter une classe à la rangée. Par exemple, dans jQuery, je l'ai fait:

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

Answer 1

réponse mise à jour:

modèle :

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

il travaillera pour moi, essayez ceci: