Как добавить смещение к индексу в угловой директиве * ngFor? - PullRequest
Новая
       14

Как добавить смещение к индексу в угловой директиве * ngFor?

0 голосов
/ 13 мая 2019

Я хочу отобразить некоторые данные из json, но я не могу просто добавить смещение к индексу и показать все данные с определенного смещения, но получить ERROR TypeError: Cannot read property 'id' of undefined и текст в div не появляется.

Я уже пытался напрямую добавить фиксированный номер в HTML-файл, и он работает (см. Код ниже). Но когда дело доходит до использования переменной «смещение» (тип: число) из машинописного текста, которая должна обновляться вводом, тип возвращаемого значения становится неопределенным, и появляется ошибка. Я также попытался использовать метод в моем файле машинописного текста вместо добавления в html-файл и вернуть новый индекс, но он не работает и показывает ошибку. Я также попытался вызвать метод, используя {{addition(i,offset)}}, и поместил результат в переменную, которую я использую в качестве индекса, но он все еще показывает ошибку.

Например, этот HTML-файл работает нормально: 

<ng-container *ngFor="let article of data; let i = index">
    <ng-container *ngIf="i<(nbElements)">
        <div (click)="checkArticle(data[(i+3)].id)">
            <p class="text-center"> {{data[(i+3)][dataKey]}}</p>
        </div>
    </ng-container>
</ng-container>

Div реагирует на мой щелчок, и появляется текст.

Однако этот HTML-файл не работает, даже если смещение установлено равным 3 (как HTML-код выше) с использованием входных данных в родительском компоненте: 

<ng-container *ngFor="let article of data; let i = index">
    <ng-container *ngIf="i<(nbElements)">
        <div (click)="checkArticle(data[(i+offset)].id)">
            <p class="text-center"> {{data[(i+offset)][dataKey]}}</p>
        </div>
    </ng-container>
</ng-container>

Появляется ошибка.

Смещение (тип: число) определено в моем файле машинописного текста таким образом, и оно изменяется родительским компонентом и может легко отображаться дочерним компонентом с помощью console.log(offset): 

export class AppColumnComponent implements OnInit {
  @Input() offset : number ;

Я ожидаю, что на выходе будут тексты, показывающие статьи моих данных json, но, поскольку я изменяю смещение с помощью такого ввода, data[(i+offset)] В результате возникает ошибка, возможно, невозможно использовать другой индекс, используя другую переменную это фиксированное число?

Спасибо за вашу поддержку, это мой первый пост на stackoverflow, надеюсь, у меня все получилось! :)

Ответы [ 2 ]

0 голосов
/ 13 мая 2019

Вы получаете доступ к индексу за пределами.

data[(i+offset)] будет undefined для последнего offset количества элементов в вашем массиве data, поэтому вы в основном пытаетесь выполнить undefined.id, что приведет к вашей ошибке. Вы должны изменить сигнатуру вашего метода, чтобы получать индекс только как параметр и обрабатывать этот случай в вашем файле component.ts

0 голосов
/ 13 мая 2019

Если вы хотите создать компонент разбиения на страницы, вам не следует полагаться исключительно на свой HTML и некоторые привязки.

Ваш компонент должен иметь «продвинутую» логику, в том смысле, что он должен знать, когда он достигает конца / начала сбора (среди прочего).

По сути, это выглядит следующим образом:

  • Получить полную коллекцию (скажем, 100 элементов)
  • Соедините ее с вашим элементом на номер страницы (скажем, 10поэтому диапазон результатов равен 0-10)
  • Проверка наличия элементов перед диапазоном
  • Проверка наличия элементов после диапазона
  • Разрешить / заблокировать изменение страницы на основе этих переменных,

Это оставляет вам

  • 1 переменную для коллекции
  • 1 переменную (или 1 канал) для подмножества коллекции
  • 1 переменная для логического значения смещения
  • 2 для отключения кнопок нумерации страниц.

Попробуйте поработать с этим, и если у вас все еще есть проблемы, то, пожалуйста, предоставьте стек, который вы пробовали!

...