Angular2 - 獲取json值以將值替換為html模板

Question

angular2的新功能，在從Footer []數組中輸出值並顯示它時出現問題。

footer.component.ts：

import { Component } from '@angular/core';

export class Footer {
  id: number;
  value: string;
}

const FOOTER : Footer[] = [
    {id: 1, value: 'value_one'},
    {id: 2, value: 'value_two'}
  ];

@Component({
    selector: 'footer',
    template: `<html-outlet [html]="footerValue"></html-outlet>`,
})
export class FooterComponent{
    foot = FOOTER;

    footerValue = `<div class="menu" *ngFor="let f of foot" >
                <div class="footer"><b>{{f.value}} @2016</b></div>
            </div>`;
}

罪惡：

template:`<html-outlet [html]="footerValue"></html-outlet>`,

從'footerValue'獲取模板並發送到另一個函數，用於動態編譯和加載html。

如果它直接傳遞為：

template: `<div class="menu" *ngFor="let f of foot" >
                <div class="footer"><b>{{f.value}} @2016</b></div>
            </div>`,

有人可以指導我如何將數組中的值附加到字符串變量'footerValue'，以遵循我的原始功能來生成html dinamically。

原始的html模板是：

`<div class="menu" *ngFor="let f of foot" >
                <div class="footer"><b>Example @2016</b></div>
            </div>`

其中'Example'應該替換為數組中的值。

Answer 1

我想問題是你的html-outlet試圖“編譯”你的html-snippet但不知道foot是什么..

所以准備你的html-snippet如下：

constructor() {
   this.footerValue = this.prepareFooterHtml();
}

prepareFooterHtml(): string {
   let footer = '<div class="menu">';
   this.foot.forEach(f => {
      footer += `<div class="footer"><b>${f.value} @2016</b></div>`;
   });
   footer += '</div>';
   return footer;
}