Угловая группа вкладок с асинхронной загрузкой содержимого вкладок.Содержание должно быть другим компонентом - PullRequest
0 голосов
/ 23 октября 2018

Я пытаюсь передать компонентный тег из моего файла ts, но получаю его в виде строки.Пожалуйста, помогите

chat-list.component.ts

export interface ExampleTab {
  label: string;
  content: string;
 }

  asyncTabs: Observable<ExampleTab[]>;

constructor() {
this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
  setTimeout(() => {
    observer.next([
      {label: 'First', content: '<app-chart-finance></app-chart-finance>'},
      {label: 'Second', content:'<app-chart-finance></app-chart-finance>'},
      {label: 'Third', content: '<app-chart-finance></app-chart-finance>'},
    ]);
  }, 1000);
});

chat-list.component.html

<ng-container *ngIf="(asyncTabs | async) === null">
Loading tabs...
</ng-container>
<mat-tab-group>
 <mat-tab *ngFor="let tab of asyncTabs | async">
  <ng-template mat-tab-label>{{tab.label}}</ng-template>
  {{table.content}}
 </mat-tab>
</mat-tab-group>

Я получаю {{table.content}}как строкаНо я хочу показать дом конкретного компонента.Я объявляю контент в виде строки.Может быть, поэтому я получаю это как строку.Итак, какие изменения мне нужно сделать, чтобы получить желаемый результат.

Спасибо всем за поддержку.

...