Как gпринудительно обновить список элементов в angular?

Question

[martrix]

есть у меня список который выводится с помощью *ngFor

<li  (click)="selectItem(item)" [ngClass]="{selected: item.select}" *ngFor="let item of data; let i = index ">
...
</li>

по клику на элементе все отрабатывает как надо - меняется свойство data[i].select и отрисовывается элемент с новым классом.

но если это свойство задать не по событию click на этом элементе, то список не перерисовывается.
как заставить список перерисоваться, а лучше отрисовать конкретный элемент?

Answer 1

[Иосиф Копейкин]

если это свойство задать не по событию click

А по какому событию?
В этом событии нужно провести те же манипуляции что и в событии click

Comments

[martrix]

это все опять же к яндекс картам относится
я из дочернего компонента вызываю обработчик родителя, который и обрабатывает клик по элементу.
но если по клику на этом элементе все работает норм, то при вызове из другого обработчика свойство data[i].select меняется, но не рендерится
в представлении

[Иосиф Копейкин]

martrix, попробуй сделать метку в виде шаблона, тогда нужные методы компонента точно будут доступны

[Иосиф Копейкин]

martrix, Используешь компонент или голый js ? Советую посмотреть готовые компоненты, например такой https://github.com/AnteaterKit/angular2-yandex-map...

[martrix]

Иосиф Копейкин, "голый" js, компонент по ряду причин не подходит.
В основном это связано с той же проблемой отсутствия реакции на изменение свойств

[Иосиф Копейкин]

martrix, так можно вместо формирования html в цикле, написать отдельный компонент и воткнуть его куда нужно. В вашем случае, событие onclick имеет совершенно другой контекст. this вернет дом эеемент button, а не вызовет функцию chek из компонента.

let content = "<img src='http://we.loc" + data[i].image + "'/>" + "<div>" + data[i].adress + "</div>" +
                "<div><button  class='btn btn-success' onclick='this.check(" + data[i].id + ")' >Отметить</button></div>" +
                "<div><a target='_blank' href='/poi/" + data[i].slug + "'>Подробнее</a></div>";

Можно попробовать прокинуть вызов через refs или query selector или addEventListener клик по кнопке. Это будет работать, но это костыль.

[martrix]

Иосиф Копейкин, не совсем понимаю как компонент вставить в массив меток :(
я в итоге этот массив передаю в objectManager

[martrix]

вопрос с отсутствием рендеринга решил с помощью ChangeDetectorRef, но по моему это неоптимально :(
как в Angular все запутано ...

[Иосиф Копейкин]

martrix, да нормально там) Так всегда кажется, когда сталкиваешь с чем-то новым.

[Иосиф Копейкин]

let content = "<img src='http://we.loc" + data[i].image + "'/>" + "<div>" + data[i].adress + "</div>" +
                "<div><button  class='btn btn-success' onclick='this.check(" + data[i].id + ")' >Отметить</button></div>" +
                "<div><a target='_blank' href='/poi/" + data[i].slug + "'>Подробнее</a></div>";

Это надо сделать отдельным темплейтом, а массив меток сделать переменной компонента. В том темплейте где карта надо через ngFor вывести их используя этот темплейт. Примерно такая схема. Ну а реализация зависит уже от того, как устроено у тебя все в коде.