Телеграмм чат группы angular_ru страница 14448

parrot.ru

Рейтинг популярных групп и каналов

В рейтинге участвует:

групп:

каналов:

Виртуальный сервер на SSD - недорого!

Аренда выделенных и виртуальных серверов (VDS/VPS), хостинг, аренда IP-адресов, администрирование, круглосуточная поддержка

qwarta.ru подробнее

Резервное копирование с проверкой на вирусы!!!

Удобный сервис создания резервных копий на любой сервер сети интернет. Отслеживайте изменения, проверяйте на вирусы. Надежно защитите свой бизнес!

go.backupland.com

Выбираете сервер? Любая конфигурация на заказ!

Аренда физических серверов любых конфигураций под любые запросы - 1С бухгалтерия, игровые сервера, нагруженные проекты, интернет-магазины!

qwarta.ru подробнее

Size: a a a

Angular - русскоговорящее сообщество

4895 membersпожаловаться на группу

2020 January 15

В

Владимир in Angular - русскоговорящее сообщество

Dmitry Provodnikov

с добрым утром, таким образом создаю переменную с оборудованием

<mat-card *ngIf="allEquipment | async as equipment">

, внутри карты есть цикл

ngFor

, который предназначен для разделения всех данных по типам, сами данные выводятся в таблицах,

[objectsList]="filterEquipmentByType(type.key, equipment)

. но такой вариант вешает всё приложение после сборки. что я тут сделал не так?
быть может лучше использовать async pipe в конечных точках, а фильтровать сам observable?

подозреваю, что вызов функции в *ngFor в темплейте в этом виноват. Решение - готовить данные заранее в классе компонента.

Любой вызов методов в темплейте приводит к лишним вызовам change detection, это приводит к тормозам

источник

10:42пожаловаться #1

DP

Dmitry Provodnikov in Angular - русскоговорящее сообщество

Владимир

подозреваю, что вызов функции в *ngFor в темплейте в этом виноват. Решение - готовить данные заранее в классе компонента.

Любой вызов методов в темплейте приводит к лишним вызовам change detection, это приводит к тормозам

если выводить данные без фильтрации всё отрабатывает, как может метод filter, который точно работает, вешать приложение, быть может нельзя вызывать его из шаблона?
и дело в том, что раньше я всегда и получал данные внутри компонента, а сейчас хочу сделать используя пайп

источник

10:46пожаловаться #2

В

Владимир in Angular - русскоговорящее сообщество

Dmitry Provodnikov

если выводить данные без фильтрации всё отрабатывает, как может метод filter, который точно работает, вешать приложение, быть может нельзя вызывать его из шаблона?
и дело в том, что раньше я всегда и получал данные внутри компонента, а сейчас хочу сделать используя пайп

Пайп это ок. Метод не ок. Можно ради эксперимента добавить туда консоль лог и посмотреть как много будет вызовов консоли

источник

10:48пожаловаться #3

AB

Alex Bu in Angular - русскоговорящее сообщество

Dmitry Provodnikov

если выводить данные без фильтрации всё отрабатывает, как может метод filter, который точно работает, вешать приложение, быть может нельзя вызывать его из шаблона?
и дело в том, что раньше я всегда и получал данные внутри компонента, а сейчас хочу сделать используя пайп

Можно пайпу дать pure false, но нужно будет аккуратно проверку для данных внутри пайпа сделать, так как он будет отрабатывать как функция в шаблоне

источник

10:50пожаловаться #4

DP

Dmitry Provodnikov in Angular - русскоговорящее сообщество

Владимир

Пайп это ок. Метод не ок. Можно ради эксперимента добавить туда консоль лог и посмотреть как много будет вызовов консоли

вы правы, зацикливается вызов метода, а по какой причине?

источник

10:53пожаловаться #5

OS

Oleg Safonov in Angular - русскоговорящее сообщество

Dmitry Provodnikov

вы правы, зацикливается вызов метода, а по какой причине?

а что в методе у вас?

источник

10:55пожаловаться #6

DP

Dmitry Provodnikov in Angular - русскоговорящее сообщество

извиняюсь за скрин, но что тут может зацикливать?

источник

10:55пожаловаться #7

OS

Oleg Safonov in Angular - русскоговорящее сообщество

Dmitry Provodnikov

извиняюсь за скрин, но что тут может зацикливать?

а в теле метода что там?

источник

10:56пожаловаться #8

DP

Dmitry Provodnikov in Angular - русскоговорящее сообщество

а что в методе у вас?

filterEquipmentByType(typeId: number, equipment: Equipment[]): Equipment[] {
    return equipment.filter(equipmentModel => equipmentModel.parentId === typeId);
  }

источник

10:56пожаловаться #9

OS

Oleg Safonov in Angular - русскоговорящее сообщество

Dmitry Provodnikov

filterEquipmentByType(typeId: number, equipment: Equipment[]): Equipment[] {
    return equipment.filter(equipmentModel => equipmentModel.parentId === typeId);
  }

ну при каждом вызове filterEquipmentByType возвращается новый массив.
Сделайте вместо вызова метода pipe или вообще из allEquipment через .pipe() из rxjs вытащите данные

источник

10:58пожаловаться #10

OS

Oleg Safonov in Angular - русскоговорящее сообщество

Типа

firstEquipment$ = allEquipment
.pipe(
map(data => data.filter(тут логика фильтрации))
)

источник

10:59пожаловаться #11

DP

Dmitry Provodnikov in Angular - русскоговорящее сообщество

Типа

firstEquipment$ = allEquipment
.pipe(
map(data => data.filter(тут логика фильтрации))
)

в данном случае ведь придется для каждой таблицы использовать

async

, а я как раз стремился один раз его использовать

источник

11:00пожаловаться #12

OS

Oleg Safonov in Angular - русскоговорящее сообщество

Dmitry Provodnikov

в данном случае ведь придется для каждой таблицы использовать

async

, а я как раз стремился один раз его использовать

а сейчас для каждой таблицы вызов метода.

Может тогда подписаться в компоненте на allEquipments например, и при изменении просчитать данные для всех таблицы и разбросать по свойствам компонента и передавать их в таблицы.

источник

11:02пожаловаться #13

OS

Oleg Safonov in Angular - русскоговорящее сообщество

allEquipment.subscribe(data => {
    this.data1 = data.filter(...);
    this.data2 = data.filter(...);
});

и т.д.

источник

11:03пожаловаться #14

OS

Oleg Safonov in Angular - русскоговорящее сообщество

но с несколькими async я думаю проблем не должно быть

источник

11:03пожаловаться #15

DP

Dmitry Provodnikov in Angular - русскоговорящее сообщество

allEquipment.subscribe(data => {
    this.data1 = data.filter(...);
    this.data2 = data.filter(...);
});

и т.д.

вы правы, спасибо за советы, переделаю тогда сейчас, с несколькими async

источник

11:03пожаловаться #16

OS

Oleg Safonov in Angular - русскоговорящее сообщество

Dmitry Provodnikov

вы правы, спасибо за советы, переделаю тогда сейчас, с несколькими async

👍

источник

11:04пожаловаться #17

В

Владимир in Angular - русскоговорящее сообщество

Dmitry Provodnikov

вы правы, зацикливается вызов метода, а по какой причине?

Так работает CD, не нужно использовать методы в темплейтах. Вариантов два:
1. Готовить данные в компоненте перед обращением к ним из темплейта
2. Писать пайп

источник

11:06пожаловаться #18

S

STEVE in Angular - русскоговорящее сообщество

Smooth Operator

всмысле с пакетами

Парни всем привет

источник

11:08пожаловаться #19

S

STEVE in Angular - русскоговорящее сообщество

как то можно разметку из ребенка вытащить в родителя?

источник

11:08пожаловаться #20