选中角度复选框时无法关闭模式

Question

我正在使用角度步长形式。在其中一个表单中，我有几个带有复选框的项目。当我选中复选框时，模态窗口正在打开，但是单击模态窗口上的关闭按钮时我无法关闭窗口。

.HTML

<div class = "pop">
<p><input type="checkbox" name="v" value="B" [checked] = "t1()">test</p>
<div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" (click) = "close()">&times;</span>
<h2>Kasse</h2>   
</div>
</div>

TS

close(){
document.getElementById("myModal").style.display = "none";
}
t1(){
document.getElementById("myModal").style.display = "block"; 
}

请指导我解决这个问题。

Answer 1

与其说是回答你的问题，不如说是一个建议，但我认为你最好重新审视你如何使用 Angular 的想法。这个问题不应该以其他方式回答，因为如果你继续这样工作，你会越来越卡住。仔细看看如何使用模板，你可以做什么，不应该做什么。

例如，目前您正在使用本机函数(如getElementById(并访问组件代码中的样式。这不是正确的方法，您应该查看模板引用变量，结合ngStyle或[style]绑定。

另一方面，您在组件中使用名为t1()的函数，该函数绑定到checked属性。此函数应返回一个布尔值，说明是否检查它，并且此函数将运行"每 - 更改检测周期"。目前，此函数不返回任何内容，并设置模态的显示。

所以建议，看看角度网站上的最佳实践和示例。这将为您提供有关如何构建强大应用程序的最佳想法