Question

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

在我的模板中，渲染它后，我有一个触发该功能的按钮：

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

是否不使用Dynamic Component Loader进行渲染而存在吗？

谢谢

Answer 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
    });

  }

Angular 6使用ngFor循环和插值渲染HTML标签

1 个答案: