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

Question

i'm having a problem with template rendering (ANGULAR 6) and a library for creating floating panels ( jsPanel 6 ) that is plain javascript. To sum up:

In my template, after rendering it, i have one BUTTON that triggers this function:

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

  }

The problem is that Angular doesn't render the ngFor, it doesn't go trough the loop and also, it doesnt get the ``{{ i }}´´ interpolation. I'm using typescript by the way.

result after clicking the button

Is there away without using Dynamic Component Loader to render that?.

Thanks

Answer 1

Obviously it does not working. Why don't you construct HTML with javascript as follows ?

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

  }