Ngx-Datatable Access rowIndex в столбцах - PullRequest
Новая
       21

Ngx-Datatable Access rowIndex в столбцах

1 голос
/ 25 марта 2019

ЗДЕСЬ ШТАБЛИЦ ДЛЯ ЭТОЙ ПРОБЛЕМЫ:

https://stackblitz.com/edit/angular-7dgk8e

Мне нужно получить доступ к rowIndex или данным строки, где я использовал ngFor, я пытался использовать rowIndexи просмотрел документы, но не смог выяснить, как это могло работать.Любая помощь будет большой благодарностью.Дайте мне знать, если потребуется дополнительная информация.Вот код: 

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

Ответы [ 3 ]

1 голос
/ 25 марта 2019

Это хороший вопрос, так как я не смог найти подходящего решения для достижения этой цели, но вместо этого попытался решить его по-другому.

Я думаю, вы не сможете получить доступ к rowIndex, где вы пытаетесь получить к нему доступ. Вот стек, который наверняка решит вашу проблему. Это не лучший способ сделать это, но это решит проблему.

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

0 голосов
/ 07 июня 2019

После того, как (вставьте здесь ругательство) с этим тупым компонентом в течение многих часов, выясняется, что в методах, которые связаны с корневым тегом ngx-datatable, таким как [rowClass] = "getRowClass", контекст вызова функции, т. е. «this», это сам datatable, а не компонент. Таким образом, если вы ищете this.rowIndex в теле функции getRowClass, вы можете найти this.rowIndex. Но вот в чем проблема: ваш TypeScript не скомпилируется, если вы не добавите локальное свойство rowIndex в свой компонент.

Я чертовски надеюсь, что это поможет кому-то после всех моих поисков и экспериментов. Я был в процессе использования метода Мортезы, опубликованного выше / ниже, но когда я изо всех сил пытался дублировать его / ее результаты, я узнал об этом переключении контекста во время выполнения. Осталось только выяснить, хочу ли я продолжать использовать такой тупой компонент или взглянуть на что-то еще, например, PrimeNG ... или старый добрый Datatables.js.

0 голосов
/ 25 марта 2019

База на вашем стеке:

app.component.ts 

@ViewChild(DatatableComponent) table: DatatableComponent;

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

app.component.html 

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

Надеюсь, это поможет вам.

...