Всем привет!
Использую Angular 5.
Есть список новостей на главной странице. К каждой новости прикреплены теги, которые открываются при нажатии на кнопку "Теги" около соответствующей новости. Фильтрация происходит через оператор ngIf в шаблоне, но не покидает ощущения, что написанный код не оптимален, фильтрацию лучше выполнять в компоненте и если новостей будет много (например, 50-100), то сценарий будет немного подтормаживать, особенно на мобилках.
ВОПРОС. Быстрее ли будет выполнять фильтрацию в компоненте? И если да, то как это сделать и в каком виде передавать результат в шаблон?
Код прилагаю.
Компонент start.component.ts:
export class StartComponent implements OnInit {
//Список всех тегов
tags: Tags;
constructor(private http:HttpClient) { }
//Подгружаем список тегов запросом к бекенду
this.http.get<Tags>('http://site.ru/api/tags').subscribe(
data => { this.tags = data; },
error => { console.log(error) });
Шаблон start.component.html
<div *ngFor="let item of news">
<p> {{item.title}} </p>
<p> {{item.content}} </p>
<span (click)="item.showTags = !item.showTags">Теги:</span>
<div *ngIf="item.showTags">
<br>
<div name="tags" *ngFor="let tag of tags">
<div *ngIf="tag.news_id == item.id">
<span> {{tag.title}} </span>
</div>
</div>
</div>
</div>
Модель Tags.ts
export class Tags{
title: string;
id: number;
news_id: number;
}
Средний