Javascript 为什么我要复制<；离子选择>；无法单击

我正在使用HTML/CSS&JavaScript创建一个表单，并添加了一个“Add”按钮，该按钮将在原始表单下显示表单的精确副本。但是，表单中的离子选择元素存在问题。在原始表单中，单击它时，它将显示我预定义的所有选项。但是，在复制表单中，单击时它不会显示任何内容。表单中同样存在的输入字段不会出现这种情况

这是我的密码：

从'@angular/core'导入{Component}；
const p=document.createElement（“p”）；
p、 textContent=“你好，世界！”；
@组成部分({
选择器：“页面逻辑”，
templateUrl:'logic.html'
})
导出类逻辑页{
addLogic（）{
警报（“添加逻辑”）；
const app=document.getElementById（“app”）；
var valueNodes=Array.prototype.slice.call（document.getElementsByClassName（“逻辑网格”）；
var values=valueNodes.map（valueNodes=>valueNodes.innerHTML）；
var result=values.join（）；
document.getElementById（'result'）。innerHTML=result；
附加物儿童（p）；
}
构造函数（）{
}
}

页面逻辑{
离子含量{
背景：玉米丝！重要；
}
}
.离子含量{
变焦：2；
}
.离子选择{
宽度：200px；
最大宽度：100%！重要；
最大高度：100%；
右：自动！重要；
方向：rtl！重要；
证明内容：左！重要；
}
.离子选择：：部分（文本）{
flex:0自动；
}
输入[类型=数字]{
宽度：100px；
}

如果
传感器：
临时雇员
湿度
酸碱度
欧共体
二氧化碳
亮度
描述：
>
Angular不处理动态添加的HTML，它只是将其“按原样”添加到DOM中，因此绑定等无法工作，这就是复制的组件无法按预期工作的原因

您可能需要进行探索

我发现这篇文章对这个主题很有用：