Угловой: использование как * ngFor, так и * ngIf со ссылкой на значение индекса в дочерних элементах

Я хотел бы визуализировать объекты из массива, наблюдаемого в некоторых компонентах grid-car. Кроме того, я хочу ограничить количество карт сетки значением на основе переменных в моем компоненте, то есть gridCols*maxRows с использованием *ngIf проверки условий.

Я знаю, что невозможно одновременно использовать *ngFor и *ngIf в одном элементе. Поэтому мне нужно использовать <template ngFor ...>, чтобы обернуть элементы моей сетки, которые будут условно отображаться на основе *ngFor. Учитывая это, как я могу ссылаться на переменные index или content из *ngFor в *ngIf.

<template ngFor let-content [ngForOf]="contentObjectsObservable | async" let-i="index" [ngForTrackBy]="trackByFn">
    <grid-card *ngIf="i < gridCols*maxRows" [content]="content" [style.width.%]="gridCardWidth"></grid-card>
</template>

ОБНОВЛЕНИЕ

Я пробовал что-то подобное

 #i="index"

с таким сообщением об ошибке:

Нет директивы с параметром "exportAs", установленным в значение "index".


angular ngfor angular-ng-if
person Michał Ziobro    schedule 08.05.2017    source источник
comment
Я бы предложил канал среза для ограничения максимального количества строк (или фактически максимального количества элементов) angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html   -  person Günter Zöchbauer    schedule 08.05.2017
comment
Это нормально, но я хотел бы также знать, как я могу ссылаться на переменные индекса и содержимого цикла ngFor в дочернем элементе ‹grid-card›, это также может быть полезно   -  person Michał Ziobro    schedule 08.05.2017
comment
Я не знаю, что такое <grid-card>. Если это компонент, который вы создали, просто добавьте входные данные, например @Input() index:int; @Input() content:SomeType;, а затем передайте его, как <grid-card *ngIf="i < gridCols*maxRows" [index]="i" [content]="content"   -  person Günter Zöchbauer    schedule 08.05.2017
comment
так что я могу определить let-i="index", а затем использовать в компоненте сетки этот оператор *ngIf="i < gridCols*maxRows". Я думал, что это не работает, потому что мои элементы никогда не скрываются   -  person Michał Ziobro    schedule 08.05.2017
comment
Он должен работать. #i="index" устарел и не поддерживается почти год. let-i="index" - правильная форма. Вы также можете использовать <ng-container *ngFor="let content of contentObjectsObservable | async; let i=index"> вместо <template ...>, чтобы иметь возможность использовать более общий синтаксис, но с тем же результатом.   -  person Günter Zöchbauer    schedule 08.05.2017
comment
Поэтому я не знаю, почему * ngIf не скрывает элемент, когда индекс i больше допустимого количества строк и столбцов   -  person Michał Ziobro    schedule 08.05.2017
comment
Попробуйте отладить это, написав {{ i }} перед <grid-card. Вы также можете проверить {{gridCols*maxRows}}   -  person yurzui    schedule 08.05.2017
comment
хорошо, я пробовал что-то вроде этого *ngIf="i < 3", и мне удалось скрыть более трех элементов, поэтому в gridCols*maxRows есть некоторая ошибка   -  person Michał Ziobro    schedule 08.05.2017
comment
Да, это gridCols*maxRows к огромному числу. Не знаю, зачем мне это проверять.   -  person Michał Ziobro    schedule 08.05.2017

Ответы (1)


arrow_upward
6
arrow_downward

Вы можете ссылаться на индекс из * ngFor, поместив let i = index в оператор * ngFor! Пример:

<div *ngFor="let item of items; let i = index">
    <div *ngIf="i < (gridCols * maxRows)" class="row">
    <grid-card [content]="content" [style.width.%]="gridCardWidth"></grid-card>
    </div>
</div>

Убедитесь, что вы определили gridCols и maxRows как числа в вашем компоненте!

gridCols:number = <your number>;
maxRows:number = <your number>;

Надеюсь это поможет!

person ob1    schedule 22.06.2017