Эта проблема:
Когда вам нужно перебрать коллекцию в Angular 2, вы, вероятно, будете использовать директиву ngFor, которая будет создавать экземпляр шаблона один раз для каждого элемента из коллекции.
Если нам нужно в какой-то момент изменить данные в коллекции, например, в результате запроса API, у нас возникнет проблема, потому что Angular не может отслеживать элементы в коллекции и не знает, какие элементы были удалены. или добавил.
В результате Angular необходимо удалить все элементы DOM, связанные с данными, и создать их снова. Это означает множество манипуляций с DOM, особенно в случае большой коллекции, а, как мы знаем, манипуляции с DOM обходятся дорого.
Примечание: когда я говорю «изменить данные», я имею в виду замену коллекции новыми объектами, а не сохранение той же ссылки.
Давайте посмотрим на это в действии:
Решение:
Мы можем помочь Angular отслеживать, какие элементы добавлены или удалены, предоставив функцию trackBy. Функция trackBy принимает индекс и текущий элемент в качестве аргументов и должна возвращать уникальный идентификатор для этого элемента.
Теперь, когда вы меняете коллекцию, Angular может отслеживать, какие элементы были добавлены или удалены в соответствии с уникальным идентификатором, и создавать или уничтожать только те элементы, которые были изменены.
Это все. Вы можете поиграть с кодом здесь.
Что нельзя пропустить:
☞ Коснитесь или щелкните «︎ ❤» , чтобы помочь продвинуть этот фрагмент среди других.
