2
votes

Ngx-Datatable Access rowIndex en colonnes

VOICI UN STACKBLITZ POUR CE PROBLÈME:

https://dynamic-ng-grid.stackblitz.io

Je dois accéder aux données rowIndex ou row où j'ai utilisé ngFor, j'ai essayé d'utiliser rowIndex et j'ai parcouru la documentation, mais je n'ai pas pu découvrir comment cela pouvait fonctionner. Toute aide serait un grand merci. Faites-moi savoir si des informations supplémentaires sont nécessaires. Voici le code:

<ngx-datatable
    style="height: 450px; cursor: pointer;"
    class="material"
    [rows]="rows"
    [rowHeight]="70"
    [footerHeight]="50"
    columnMode="force"
    [scrollbarV]="true"
    [scrollbarH]="true">

    <!-- months col -->
    <ngx-datatable-column 
        *ngFor="let month of getMonths(rows, rowIndex)" // THIS IS THE PLACE WHERE I HAVE TO ACCESS THE ROWINDEX OR ROW BUT UNABLE TO ACCESS IT 
        [name]="month.name"
        [width]="465">

        <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>

            <span *ngIf="!month.detail; then avgTemp; else ratingTemp;"></span>
            <!-- average score -->
            <ng-template #avgTemp>{{ month.value | json }} MV</ng-template>
            <!-- monthly rating -->
            <ng-template #ratingTemp>
            <span *ngIf="month.detail.rating.isNA === 'Y'; then isNaTemp; else notNaTemp"></span>
            <!-- N/A -->
            <ng-template #isNaTemp>N/A</ng-template>
            <!-- Non-N/A -->
            <ng-template #notNaTemp>
                <span *ngIf="month.detail.rating.hrRating !== null; then hrRatTemp; else otherRatTemp"></span>
                <!-- Hr Rating -->
                <ng-template #hrRatTemp>{{ month.detail.rating.hrRating }} HR</ng-template>

                <ng-template #otherRatTemp>
                    <span *ngIf="month.detail.rating.lmRating !== null; then lmRatTemp; else otherRatTemp"></span>
                    <!-- Lm Rating -->
                    <ng-template #lmRatTemp>{{ month.detail.rating.lmRating }} LM</ng-template>

                    <ng-template #otherRatTemp>
                        <span *ngIf="month.detail.rating.empRating !== null; then empRatTemp; else zeroTemp"></span>
                        <!-- Emp Rating -->
                        <!-- <ng-template #empRatTemp>{{ month.detail.rating.empRating }} Emp</ng-template> -->
                        <ng-template #empRatTemp>{{ row.months | json }} Emp</ng-template>
                        <ng-template #zeroTemp>
                        <span *ngIf="(rowIndex + 1) != rows.length">0</span>
                        </ng-template>
                    </ng-template>
                </ng-template>
            </ng-template> <!-- Non-N/A -->
            </ng-template> <!-- monthly rating -->

        </ng-template>
    </ngx-datatable-column>

</ngx-datatable>

7 commentaires

Êtes-vous toujours confronté au problème? Juste pour comprendre votre question, où avez-vous exactement besoin d'accéder à rowIndex ?


@wentjun merci d'avoir contacté. Oui, j'ai toujours ce problème. Je dois y accéder là où j'ai utilisé ngFor dans ngx-datatable-column. Vous pouvez voir que dans le code aussi, je lui ai fait un commentaire.


Et votre méthode getMonths () est incapable de lire rowIndex ?


oui, je ne parviens pas à envoyer rowIndex dans la méthode. Il montre undefined


Vous pouvez utiliser l'index du tableau (le tableau sera renvoyé par getMonths) dans ngfor. Il y a un index lorsque vous bouclez dans un tableau !!!


@MortezaEbrahemi, mon ami, ce n'est pas comme ça que ça se passe, si je fais cela, je vais parcourir l'index en continu. Quand j'ai réellement besoin de l'index de la ligne et non d'un index lors de la boucle. J'ai fait un stackblitz, regardez ceci: stackblitz.com/edit/angular-7dgk8e


Si j'ai bien compris ce que vous voulez dire, regardez ma réponse.


3 Réponses :


0
votes

Basé sur votre stackblitz:

app.component.ts

...
<ngx-datatable  ....  #table> 
   <ngx-datatable-column>
        {{ getRowIndex(row) }}
   </ngx-datatable-column>
...

app.component.html

@ViewChild(DatatableComponent) table: DatatableComponent;

public getRowIndex(row: any): number {
    return this.table.bodyComponent.getRowIndex(row); // row being data object passed into the template
}

J'espère que cela vous aidera.


2 commentaires

Merci pour la réponse Morteza, j'ai essayé différentes choses sur stackblitz, je pensais que les gens ne le regardaient pas. Veuillez vérifier maintenant et vous pourrez voir ce que j'essaie de réaliser


Veuillez vérifier la ligne numéro 13 en HTML et la ligne numéro 15 dans le fichier TS



1
votes

C'est une bonne question car je n'ai pas pu trouver de solution pertinente pour y parvenir, mais j'essaie plutôt de la résoudre d'une manière différente.

Je pense que vous ne pourrez pas accéder au rowIndex où vous essayez d'y accéder. Voici un stackblitz qui résout sûrement votre problème. Ce n'est pas la meilleure façon de procéder, mais cela résoudra le problème.

https://stackblitz.com/edit/angular-hpm8k9


2 commentaires

Merci pour la réponse, je la vérifierai dans un moment et je vous répondrai.


Cela marche. C'était en fait la dernière chose que j'avais en tête, si je n'arrive pas à obtenir le rowIndex dans ma méthode. Merci



0
votes

Après (insérez un gros mot ici) avec ce composant stupide pendant de nombreuses heures, il s'avère que sur les méthodes liées à la balise racine ngx-datatable, comme [rowClass] = "getRowClass", le contexte de l'appel de fonction, c'est-à-dire "ceci", est la datatable elle-même, pas le composant. Ainsi, si vous recherchez this.rowIndex dans le corps de votre fonction getRowClass, vous pouvez trouver this.rowIndex. Mais voici le hic: votre TypeScript ne se compilera que si vous ajoutez une propriété rowIndex locale à votre composant.

J'espère que cela aidera quelqu'un après toutes les recherches et expériences que j'ai faites. J'étais en train d'utiliser la méthode Morteza publiée ci-dessus / ci-dessous, mais lorsque j'ai eu du mal à dupliquer ses résultats, j'ai découvert ce changement de contexte au moment de l'exécution. La seule chose qui reste est de savoir si je veux continuer à utiliser un composant aussi loufoque ou regarder quelque chose d'autre comme peut-être PrimeNG ... ou de bons vieux Datatables.js.


0 commentaires