Question

我正在尝试根据外部服务器的响应动态呈现内容。

目前，实现非常简单，服务器返回JSON值，文本对应纯文本元素或按钮。

[{
    "type": "text",
    "data": "Hello"
}, {
    "type": "button",
    "data": "World"
}]

在这个简单的设置中，text类型应该呈现<b>元素，而button类型应该呈现<button>元素。但是，在将来，我计划在响应中使用包含更多字段的更大模板。

基于此响应，我想按顺序呈现页面内容，结果如下。

<b>Hello</b>
<button>World</button>

我不确定如何使用不同组件类型的数组来实现此目的。

实现这一结果的最佳方法是什么？

Answer 1

好的我做了一个快速的原型来满足你的需求基本的想法是，您应该在json响应的结果中映射每个项目（使用一些flags）来确定要使用的正确html标记。
之后，您应该将每个项目的数据连接到构造的标签，而不要忘记在字符串的开头和结尾附加开始和结束标签。
最后将构造的字符串附加到组件模板的innerHTML。

const flags = {
  text: 'b',
  button: 'button',
};

@Component({
  selector: 'example',
  template: '<div></div>',
})
export class Example {

  public serverResponse =
    [{
      "type": "text",
      "data": "Hello"
    }, {
      "type": "button",
      "data": "World"
    }];

  private myTemplate: string = '';

  constructor(private elem: ElementRef) {
    this.templateBuilder();
    this.elem.nativeElement.innerHTML = this.myTemplate;
  }

  private templateBuilder() {
    this.serverResponse.forEach((object) => {
      this.myTemplate += `<${flags[object['type']]}>${object['data']}</${flags[object['type']]}>\n`;
    });
  }

}

这就是它。希望它有所帮助!!

如何使用Angular为数组中的每个元素渲染不同的组件？

1 个答案: