Angular 6 使用带有插值的 ngFor 循环渲染 HTML 标签答案

【问题标题】：Angular 6 rendering HTML tag with ngFor loop with interpolationAngular 6 使用带有插值的 ngFor 循环渲染 HTML 标签
【发布时间】：2019-01-30 01:58:15
【问题描述】：

我在模板渲染 (ANGULAR 6) 和用于创建纯 javascript 浮动面板 (jsPanel 6) 的库方面遇到问题。总结一下：

在我的模板中，渲染后，我有一个触发此功能的 BUTTON：

public openPanel()
  {

    let list: Array<number> = [1, 2, 3];

    let tag : string = '<ul> <li *ngFor="let i of list"> {{ i }} </ul>';

      jsPanel.create({
        theme:       'primary',
        contentSize: {
            width: function() { return Math.min(730, window.innerWidth*0.9);},
            height: function() { return Math.min(400, window.innerHeight*0.5);}
        },
        position:    'center-top 0 250',
        animateIn:   'jsPanelFadeIn',
        headerTitle: 'I\'m a jsPanel',
        content:     tag,
        onwindowresize: true
    });

  }

问题在于 Angular 没有渲染 ngFor，它没有通过循环，而且它没有得到“{{ i }}´”插值。顺便说一句，我正在使用打字稿。

result after clicking the button

不使用动态组件加载器来呈现它吗？

谢谢

【问题讨论】：

标签： javascript angular typescript angular6 ngfor

【解决方案1】：

显然它不起作用。为什么不使用 javascript 构造 HTML，如下所示？

public openPanel()
  {

    let list: Array<number> = [1, 2, 3];

    let tag: string = list.map(i => 
      `<ul><li>${i}</ul>`
    ).join('');

      jsPanel.create({
        theme:       'primary',
        contentSize: {
            width: function() { return Math.min(730, window.innerWidth*0.9);},
            height: function() { return Math.min(400, window.innerHeight*0.5);}
        },
        position:    'center-top 0 250',
        animateIn:   'jsPanelFadeIn',
        headerTitle: 'I\'m a jsPanel',
        content:     tag,
        onwindowresize: true
    });

  }

【讨论】：