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

Posted 2023-05-07

【中文标题】选中角度复选框时无法关闭模式

【英文标题】：Unable to close the modal when an angular check box is checked

【发布时间】：2019-12-24 12:15:06

【问题描述】：

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

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"; 

请指导我解决这个问题。

【问题讨论】：

你能分享一个stackbiltz吗

不确定 style.display 值是否在这里表现良好。你试过隐藏价值吗？

【参考方案1】：

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

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

另一方面，您在组件内部使用了一个名为 t1() 的函数，绑定到 checked 属性。这个函数应该返回一个关于它是否被检查的布尔值，并且这个函数将运行-every-change检测周期。目前这个函数没有返回任何东西，并设置你的模态显示。

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

【讨论】：

感谢您的宝贵时间和建议。它帮助了我。