使用 *ngFor 添加字符串数组和 HTMLDivElements 到 DOM

Question

我有这样的布局要求

我想用CSSdisplay: grid;

someFunction(data) {
        this.data = data;
        let parentDiv1 = document.createElement('div');
        parentDiv1.className = 'div';
        parentDiv1.textContent = 'Random Inner Text';
        let cb1 = document.createElement('input');
        cb1.type = 'checkbox';
        cb1.className = 'check-box';
        parentDiv1.appendChild(cb1);
        this.tableKey = [
            '',
            `Text: ${this.data.someRandomText1}`,
            `Text: ${this.data.someRandomText2}`,
            `Text: ${this.data.someRandomText3}`,
            `Text: ${this.data.someRandomText4}`,
            `Text: ${this.data.someRandomText5}`,
            parentDiv1,
            `Text: ${this.data.someRandomText6}`,
            `Text: ${this.data.someRandomText7}`,
            `Text: ${this.data.someRandomText8}`,
            parentDiv1
        ];
    }

<div class="container">
    <div class="table">
        <ng-container *ngFor="let item of tableKey" [innerHTML]="item"></ng-container>
    </div>
</div>

这就是输出结果（忽略CSS）。

现在我想要一个复选框和文本，而不是 [object HTMLDivElement]。有办法吗？

Answer 1

方法一

您可以使用 html 元素的 outerHTML 属性以便您的数组仅包含字符串，然后在模板中清理这些字符串，以便 html可以显示

component.ts

this.tableKey = ["text1", "text2", 
  parentDiv1.outerHTML, //Convert html element to string

component.html

<div *ngFor="let item of tableKey" [innerHTML]="item | safeHtml ">

方法二

像你的例子一样只使用一个混合数组strings/HtmlElements，并在模板中根据类型决定如何显示它

component.ts

this.tableKey = ["text1", "text2", 
  parentDiv1, //array of mixed elements

// ...
public isString(value: any)
{
  return typeof(value) ==='string';
}

component.html

<ng-container *ngFor="let item of tableKey" >

  <div *ngIf="isString(item)" [innerHTML]="item"></div> <!-- display string -->
  <div *ngIf="!isString(item)" [innerHTML]="item.outerHTML | safeHtml" ></div> <!-- display html element -->

</ng-container>

见stackblitz demo

Answer 2

此解决方案的最佳方法是使用已创建元素的 outerHTML 属性。然后使用管道在 HTML 组件中对其进行清理。

// .component.ts

export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;
  tableKey: any[];

  ngOnInit() {
    let parentDiv1 = document.createElement("div");
    parentDiv1.className = "div";
    parentDiv1.textContent = "Random Inner Text";
    let cb1 = document.createElement("input");
    cb1.type = "checkbox";
    cb1.className = "check-box";
    parentDiv1.appendChild(cb1);
    this.tableKey = [
      "Random 1",
      "Random 2",
      "Random 3",
      "Random 4",
      "Random 5",
      "Random 6",
      parentDiv1.outerHTML,
      "Random 7",
      "Random 8"
    ];
  }
}

// .pipe.ts

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

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}
  transform(value: string) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

<div class="container">
  <div *ngFor="let item of tableKey" [innerHTML]="item | safeHTML">
  </div>
</div>

DEMO

使用 *ngFor 添加字符串数组和 HTMLDivElements 到 DOM

Adding an array of strings and HTMLDivElements using *ngFor to DOM

html

innerhtml

typescript

ngfor

angular