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

Question

[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;	   
}

Comments

[Александр Семенов]

А вы не думали выдавать уже готовый объект NEWS с включенным в него полем TAGS, тогда у Вас не будет потребности в

<div *ngIf="tag.news_id == item.id">

[Ole89]

Александр Семенов

ОК, я отредактирую модель News.ts:

export class News{
    id: number;
    title: string;
    tags: Tags;
}

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

[Александр Семенов]

А на бекенд у Вас нет возможности повлиять?

Конструкция что то вроде такой при выводе:

<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">
          <div name="tags" *ngFor="let tag of item.tags">
        	<span> {{tag.title}} </span>    
    	  </div>
     </div>
  </div>

[Ole89]

@w4_alex

По фронтенду все понял. Спасибо :)

На бекенду.
Есть две отдельные таблицы - News и Tags. Соответственно, на данный момент выполняется запрос ко всем новостям и запрос ко всем тегам.
Нужно ли делать какой-то другой запрос? Или опять-таки нужно что-то делать на фронте, чтобы данные нормально "легли"?

Структура таблицы News
Field | Type | Null | Key | Default | Extra |
+------------+------------------+------+-----+---------+----------------+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| title | varchar(150) | YES | | NULL | |
| content | text | YES | | NULL | |
| news_date | datetime | NO | | NULL | |

Структура таблицы Tags
+------------+------------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+------------------+------+-----+---------+----------------+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| news_id | int(10) unsigned | YES | MUL | NULL | |
| tag | text | YES | MUL | NULL | |

[Александр Семенов]

Просто сделайте эту связку на сервере, т.е. сформируйте нужную Вам структуру и предоставьте её фронтенду.
Что то вроде такого:

[
   {
    id: 1;
    title: 'test';
    tags: [
       {id: 1, title: 'test 1', new_id: 1},
       {id: 2, title: 'test 2', new_id: 1}
       {id: 3, title: 'test 3', new_id: 1}
    ];
  },
......
{....} /* еще одна новость */
]

[Ole89]

Александр Семенов, понял, спасибо большое за пояснения