如何在角2打字稿上更改div的innerHTML（使用DIV id）

Question

我有一些以编程方式创建的div，如下所示。

<li *ngFor="let item of items;let i = index;">
   {{item}}
   <div id="badge{{i}}">this area will be updated at .ts</div>
</li>

实际上，我们最终会得到像这样的dom元素： badge0，badge1，依此类推。

我需要再次以编程方式从ts端更新这些div的innerHTML。

基本上，代码应该执行以下操作： find the div with the id badge6和update its innerHTML with "blah blah"。

让我联系这些div的语法是什么？

Answer 1

<li *ngFor="let item of items;let i = index;">
   {{item}}
   <div id="badge{{i}}">{{setItem(i)}}</div>
</li>

在.ts中添加逻辑：

setItem(index) {
  if (index === 6) {
    return 'blah blah';
  }
  return 'whatever';
}

你不应该使用innerHTML，这不是一种有角度的方式。

Answer 2

您可以使用property binding（如果内容包含一些HTML标记，请参阅this article）：

<div [innerHTML]="getDivContent(i)"></div>

或interpolation：

<div>{{ getDivContent(i) }}</div>

使用组件类中的public方法：

public getDivContent(index: number): string {
   return some content...
}