属性"checked"在动态添加的元素上无法工作

Question

我正在尝试动态创建一个使用 [attr.checked] 的元素。

.ts

public value = true;

ngAfterViewInit(){
  let testElemet = let testElemet = `<input type="checkbox" [attr.checked]="` + this.value + `? 'checked' : null"/>`;
  document.getElementById("test").innerHTML = testElemet;
}

.html

<div id=test>
 <!-- element is created here but is not checked -->
</div>

<!-- this element is checked as it should -->
<input type="checkbox" [attr.checked]="value ? 'checked' : null"/>

任何解释都将不胜感激。

- Dzak

---

Angular有自己的模板语法来动态生成HTML。请使用它，不要尝试使用innerHTML。 - Quentin

Answer 1

在Angular中不能像AngularJS那样使用$compile服务来编译动态内容，这种方式是行不通的。

你需要寻找的是动态组件加载，可以查看官方指南https://angular.io/guide/dynamic-component-loader。

- maximz101