Angular2 – 获取json值以将值替换为html模板

2023年4月4日 319次阅读

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’应该替换为数组中的值.

最佳答案 我想问题是你的html-outlet试图“编译”你的html-snippet但不知道脚是什么..

所以准备你的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;
}
点赞