Как ссылаться на компонент в массиве?

Question

Я новичок в Angular 2+. У меня есть массив, и я хочу сослаться на массив HTML-файл или компонент. Мне нужно полностью отобразить разметку.

 export interface Termosrat {
  id: number;
  name: string;
  nominal: string;
  price: number;
  description: ????; // What is here?
  picPath: string;
  picAlt: string;
}
export var ELEMENT_DATA_TERMOSTATS: Termosrat[] = [
  {
    id: 75,
    name: 'Терморегулятор WÄRMEHAUS TouchScreen',
    nominal: 'Сенсорный',
    price: 247.00,
    description: ????, // And what is here?
    picPath: "../../assets/images/WH_TS_front_s700.jpg", picAlt: "ТЕРМОРЕГУЛЯТОР WÄRMEHAUS TOUCHSCREEN"
  },

Мне нужно вставить элемент здесь (????):

 <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
          <div class="element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
            <div class="example-element-diagram">
              <div class="element-name"> <img src={{element.picPath}} alt={{element.picAlt}} height="360" width="360" > </div>
            </div>
            <div class="element-description">
              ???? 
            </div>
          </div>
        </td>
      </ng-container>

Answer 1

Если я правильно понимаю, у вас есть некоторые Htmls в вашем объекте, и вы хотите связать и отобразить его.

В этом случае вам нужно определить ваши типы как string как ниже

export interface Termosrat {
  id: number;
  name: string;
  nominal: string;
  price: number;
  description: string;
  picPath: string;
  picAlt: string;
}
export var ELEMENT_DATA_TERMOSTATS: Termosrat[] = [
  {
    id: 75,
    name: 'Терморегулятор WÄRMEHAUS TouchScreen',
    nominal: 'Сенсорный',
    price: 247.00,
    description: '<div><ul><li>Item 1</li><li>Item 2</li></ul></div>', // And what is here?
    picPath: "../../assets/images/WH_TS_front_s700.jpg", picAlt: "ТЕРМОРЕГУЛЯТОР WÄRMEHAUS TOUCHSCREEN"
  },

затем привяжите его к innerHtml, как показано ниже

    <div class="element-description" [innerHtml]="element.description">
    </div>

Но этого недостаточно, вам нужно добавить safeHtmlPipe к вашему приложению и после этого измените его на

    <div class="element-description" [innerHtml]="element.description | safeHtml">
    </div>

Реализация SafeHtml

сейф-html.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitized: DomSanitizer) { }

  transform(value: any): SafeHtml {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }

}

и добавить его к обоим declarations а также providers вашей app.module.ts