在 ngFor Angular 2 中设置输入类型复选框的选中状态

2023-12-19

我有一个 Angular 2 应用程序,我使用 ngFor 来处理一堆复选框。当我初始化这个组件时,我需要根据天气设置复选框的状态,id 存在于数组中

<div *ngFor="let option of listOptionResponse.options" class="col-md-12">
        <div class="col-lg-12">
            {{option.headline}}
        </div>
        <div class="col-lg-2 col-md-2 ">
            <input type="checkbox" class="form-control"  (change)="ServiceAddOrRemove($event, option.id)" name="choose">
        </div>
    </div>

在组件中,我有一个数组,如果该数组中存在 options.id,我想将其设置为 true。

我想不出一个好方法来做到这一点,我一直在寻找某种可以使用的初始化事件,但运气不好。 (这与现有(更改)事件无关)

我希望你能提供帮助,并提前致谢


你可以只绑定到checked like

<input type="checkbox" class="form-control"  (change)="ServiceAddOrRemove($event, option.id)" name="choose"  
    [checked]="ids.indexOf(option.id) != -1">
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 ngFor Angular 2 中设置输入类型复选框的选中状态 的相关文章

  • 如何将MathJax公式转换为img

    Mathjax 现在在我的项目中运行良好 但有一个问题 有没有办法将MathJax的公式 纯html和css 转换成img文件 我可以保存 MathJax 可以配置为生成 SVG 看http docs mathjax org en late
  • 使用 ng-blur 和 ui-sref 无法按预期工作

    我有一个带有自定义下拉结果面板的搜索字段 在其中输入单词或聚焦时会显示该面板 所以我的 html 看起来像这样 div class input group div
  • 使用css动画使div元素移动到页面的每个角落

    我想知道如何使用CSS动画使圆形div元素移动到页面的每个角落 我曾尝试这样做 但没有成功 这是一个相当基本的问题 但它会帮助我理解
  • 如何使用 bootstrap-select 在每个选择选项上添加工具提示

    我正在尝试使用 bootstrap select 将工具提示添加到每个选择选项 当我检查时 似乎 select js 将 select 标签转换为 ul 我不知道这是我的代码不起作用的原因 html div class form group
  • 推荐的 HTML 格式化程序脚本/实用程序? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在单页应用程序中使用 #-URL?

    本文 http danwebb net 2011 5 28 it is about the hashbangs提出了一个非常令人信服的论点 因为 URL 是长期存在的 它们被添加书签并传递 所以它们应该是有意义的 并且使用哈希进行真正的路由
  • 重置 div 内容的 css 样式

    有一个用 css 样式定制的 html 页面 我无法更改此 css 该页面的一个标签被设计为动态 html 数据的容器 我怎样才能 重置 这个div的css设置 页面中定义的css样式对此div的内容没有影响 我只能访问动态 html 并且
  • 开放式 WebSocket 连接存在哪些安全问题?

    我正在构建一个使用 websockets 的应用程序 我只允许经过身份验证的用户在登录并被授予会话 ID 后打开与服务器的 Websocket 连接 一旦我与经过身份验证的用户打开了 Websocket 连接 当前 页面 就会保存打开的 W
  • 如何在同一个

    中设置两种不同的字体大小

    我有一段 HTML 代码 我一直坚持不下去 我怎样才能将这个文本的第一部分的字体大小设置为 20px 以及后面的文本 br 标签字体大小为 15px 或者 如果我做的完全错误 我该如何做而不将它们放在不同的标签中 p Los Santos
  • jQuery数据表设置列设计和成功回调中的值

    我为我的数据表编写了以下代码 它用我的数据库中的内容填充表 如下所示 if datatable null datatable destroy datatable tableProducts DataTable pageLength 50 b
  • 为什么该消息没有出现在 Chrome 中的手风琴上方?

    我正在尝试新的 HTML5 验证 当我尝试使用required里面的属性
  • Javascript 制作音频 blob

    我正在测试 html 音频标签 我想制作音频 blob url 就像 youtube 或 vimeo 那样 并将其添加到 src 开始播放音频 我一直在测试new Blob and URL createObjectURL 但我不知道如何使用
  • 如何将查询参数添加到守卫中的路由并将其传递给 Angular 4 中的组件?

    我在我的 Angular 4 应用程序中使用路由保护 如果条件满足并返回 true 我想向路由添加一个查询参数 这是我一直在研究的代码 Injectable export class ViewGuardService implements
  • 为什么在缩放的 html5 画布中可以看到伪像?

    我见过this https stackoverflow com questions 7615009 disable interpolation when scaling a canvas and this https stackoverfl
  • 为什么 Firefox 关闭空 html 标签?

    我注意到在 Firefox 中 当我查看源代码时 它会向空标签项添加结束标签 例如 hr and img src image jpg 在 Firefox 中查看源代码我明白了 hr and img src image jpg 该文档是 HT
  • Angular 2发送数组另一页

    我正在使用 Angular 开发天气应用程序 我是 Angular 的新手 我想带上我选择的城市的天气信息 但我无法将数据发送到第二页 哪里有问题 预先感谢您的帮助 export class ForecastComponent implem
  • CreateJs Canvas 形状在 Windows Phone 上丢失坐标

    我正在制作一个 Createjs 和 html5 项目 在其中绘制一个形状 红色圆圈 当我单击圆圈时它会发出警报 它在所有台式机和 Android 手机上都能正常工作 除非我在 Windows Phone 中打开它 否则它在普通屏幕上工作正
  • 将 div 附加到另一个 div 的右侧

    我有一个 div 它就像一个容器 里面有 2 个图像 一张图像位于 div 的左侧 另一张图像位于右侧 我的容器是Bootstrap的容器 它们都用 div 包裹 并且div s position is fixed 我的问题是我无法找到要附
  • 禁用移动设备上的锚点菜单点击

    我使用嵌套列表作为带有子菜单项的菜单 我曾经这样做过 如果您将鼠标悬停在主菜单项上 子菜单项将通过将显示从无更改为块来出现 我决定让子菜单看起来就像是下拉的 并使用了 CSS 过渡 我遇到的问题是 在第一种方法中 如果您触摸 iPad 上的
  • 在画布上剪出圆形图像

    我正在使用 html5 canvas 并且我正在创建一个游戏 可以将您的脸部上传到游戏中 并将其用作主要角色 不幸的是 游戏中的角色是圆形的 就像笑脸一样 那么这将如何完成呢 是否可以拍一张照片 然后将其剪成一个圆 这样圆之外的任何东西都是

随机推荐