选中 angular 复选框时无法关闭模式

Question

我正在使用 angular 步骤表单。在其中一种形式中，我几乎没有带复选框的项目。当我选中复选框时，模态 window 正在打开，但是当单击模态 window 上的关闭按钮时，我无法关闭 window。

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 属性。这个函数应该 return 一个关于它是否被检查的布尔值，并且这个函数将运行 - 每个变化检测周期。目前这个函数没有 returning 任何东西，也没有设置你的模式的显示。

所以建议，请查看 angular website 中的最佳实践和示例。这将为您提供有关如何构建强大应用程序的最佳想法

选中 angular 复选框时无法关闭模式

Unable to close the modal when an angular check box is checked

checkbox

typescript

angular

angular-material-stepper