如何在角度5的ng-multi-select下拉列表中添加文本字段或html

Question

目前我有一个多选下拉菜单，默认情况下复选框。现在我想在值附近添加一个文本字段。

最初我只是在引用中添加纯HTML，但它不能像我预期的那样工作。然后我试图逃避双引号，但它仍然保持不变

dummyArray: Array<any> = [{
    'pan_name': '',
    'pan_label':'',
    'pan_type':'Mul-select',
    'pan_field':'',
    'pan_value':[{'id':1,'name':'xxxx'+'<h2 class=/"fg-white/">AboutUs</h2>`'}]
}]

<div class="form-check">
    <label>{{field.pan_label}}</label>
    <ng-multiselect-dropdown [placeholder]="'Select'"
                             [data]="field.pan_value"
                             name="{{field.pan_field}}"
                             [(ngModel)]="field.pan_name"
                             [settings]="dropdownSettings">
    </ng-multiselect-dropdown>
</div>

我想在值附近添加一个文本字段。

Answer 1

出于某些安全原因（XSS），默认情况下不能将HTML直接绑定到视图。 Angular为您提供一项服务，允许您清理HTML内容并将其绑定到视图https://angular.io/api/platform-browser/DomSanitizer。

例如，您可以创建一个可用于清理HTML的管道：

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) { }
  transform(value: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}