@Ole89

Быстрее ли будет выполнять фильтрацию в компоненте?

Всем привет!

Использую 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;	   
}
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы