Можно ли рендерить компоненты в mat tab?

Question

[Константин]

У меня почему-то такой подход показывать компоненты в табах дает переполнение буфера - причем без ошибок:

<mat-tab-group
  animationDuration="0ms"
  [selectedIndex]="selectedTabIndex"
  (selectedTabChange)="tabChanged($event)"
>
  <mat-tab *ngFor="let order of getorderVersionsService()">
    <ng-template mat-tab-label>
      {{ order.versionid }}
    </ng-template>

    <!-- Content-->

    <ng-template matTabContent>
      <app-order-definition [orderDefinition]="order"></app-order-definition>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Допускает ли вообще Ангуляр рендерить компоненты в цикле в теле?

<app-order-definition [orderDefinition]="order"></app-order-definition>

У меня почему-то такой подход виснет

Comments

[Дмитрий Лузанов]

Покажите getorderVersionsService()

[Константин]

Дмитрий Лузанов, это обычный метод из синглтон серсива который возвращает массив Ордеров

[Дмитрий Лузанов]

Константин, он у вас вызывается на каждую перерисовку компонента, если changeDetectionStrategy не OnPush. Проблема может быть в этом.

[Константин]

Дмитрий Лузанов, Сейчас выставлю changeDetectionStrategy Пуш проверю

[Константин]

Константин, Это нужно сделать в компоненте где табы?

[Константин]

Константин, сейчас все перестало вообще отображатся с push - ангуляр не видит изменений

[Дмитрий Лузанов]

Константин, где getorderVersionsService, там и нужно. И лучше из сервиса возвращать Observable, и в шаблоне пользоваться async пайпом, чтобы было декларативно. А не вызывать методы.

[Константин]

Константин, данные прилетают через emit.subcribe в ngInit

[Константин]

как можно переписать чтобы возвращал observer - если у меня это массив и как добавлятиь в массив обсервебл?

[Константин]

Константин, так?

private _todos: BehaviorSubject<any> = new BehaviorSubject([]);
  public readonly todos: Observable<any> = this._todos.asObservable();

[Константин]

Константин, добавляю так но это не рабоатет:

this._todos.next(this._todos.getValue().push(version));

Answer 1

[Антон Швец]

Легко проверить же
https://stackblitz.com/edit/angular-selecting-matt...