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

如果我理解正确，则您的对象中有一些Html，并且想要绑定并显示它。

在这种情况下，您需要像下面这样将类型定义为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

safe-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的{{1}}和providers中

如何引用数组中的组件？

1 个答案:

实施SafeHtml