Angular не может динамически отображать сгенерированный HTML с помощью кнопки - PullRequest
Новая
       35

Angular не может динамически отображать сгенерированный HTML с помощью кнопки

1 голос
/ 27 мая 2019

У меня возникла проблема, я хочу преобразовать сгенерированный HTML-код в таблицу материалов с помощью Pipe, но она не работает.

код выглядит так:

pipe.ts 

import { Pipe, PipeTransform } from "@angular/core";
import * as _ from "underscore";

@Pipe({ name: "customPipeChecks" })
export class CustomPipeChecks implements PipeTransform {
  transform(
    elementValue: {},
    elementProperty: string,
    object: {},
    customPipeFunction: any,
    defaultValue: string
  ) {
    if (customPipeFunction != null && _.isFunction(customPipeFunction)) {
      console.log(customPipeFunction(elementValue, elementProperty, object));
      return customPipeFunction(elementValue, elementProperty, object);
    } else {
      if (defaultValue) {
        return defaultValue;
      }
      return elementValue;
    }
  }
}

сгенерированная функция 

  private setCustomValueFunction() {
    this.customValueFunction = (
      elemValue: string,
      elemKey: string,
      elem: {}
    ) => {
      if (elemKey === "vin") {
        elemValue = "<button>zrdzdrz</button>";
      }
      return elemValue;
    };
  }

эта функция генерирует строку HTML.

HTML-код выглядит так: 


<td
     mat-cell
     *matCellDef="let cellData"
     class="{{
              cellData[colName]
                | customPipeChecks: colName:cellData:customCssFunction:' '
            }}"
     innerHtml="{{
              cellData[colName]
                | customPipeChecks: colName:cellData:customValueFunction
       }}">
</td>

Когда приложение загружено, оно будет отображать только 'zrdzdrz' только текст (внутренний HTML-код нужной кнопки), без кнопки (которая предназначена для переноса текста).

Есть предложения?

С наилучшими пожеланиями,

Leo

1 Ответ

1 голос

Очень интересный вопрос.

Вот демонстрация на StackBlitz , которая решит вашу проблему.

Причина, по которой ваша реализация не работает, заключается в том, что angular дезинфицирует внедренный HTMl, чтобы обойти это, ваш пользовательский канал должен выглядеть как фрагмент кода ниже, где важной частью является использование DomSanitizer который "скажет" платформе явным образом, что вы хотите внедрить HTML, который должен быть визуализирован. 

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

@Pipe({ name: "customPipeChecks" })
export class CustomPipeChecks implements PipeTransform {

  constructor(
    public sanitizer: DomSanitizer,
  ) { }
  transform() {
    return this.sanitizer.bypassSecurityTrustHtml('<button>Button content</button>')
  }
}

Обновление

Еще один заметный момент заключается в том, что в шаблоне вы должны ввести innerHTML следующим образом, [innerHTML] 

<td mat-cell *matCellDef="let element" [innerHtml]="'someString' | customPipeChecks">
    </td>
...