首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Angular 6中从现有的逗号分隔输入转换为多个复选框

在Angular 6中,可以通过以下步骤将现有的逗号分隔输入转换为多个复选框:

  1. 创建一个组件,并在模板中添加多个复选框。
  2. 在组件的类中,创建一个变量来存储逗号分隔的输入值。
  3. 使用Angular的双向数据绑定,将输入值与变量绑定。
  4. 创建一个方法来处理输入值的转换。在该方法中,使用JavaScript的split()函数将逗号分隔的输入值拆分为一个字符串数组。
  5. 在组件的生命周期钩子函数ngOnInit()中调用转换方法,以便在组件初始化时执行转换。
  6. 使用ngFor指令在模板中循环遍历字符串数组,并将每个值绑定到复选框的选中状态。

以下是一个示例代码:

代码语言:txt
复制
// 在组件的类中定义变量和方法
export class MyComponent implements OnInit {
  inputValues: string;
  checkboxValues: string[];

  ngOnInit() {
    this.convertInputToCheckboxes();
  }

  convertInputToCheckboxes() {
    this.checkboxValues = this.inputValues.split(',');
  }
}

// 在组件的模板中使用ngFor循环遍历复选框
<div *ngFor="let value of checkboxValues">
  <input type="checkbox" [value]="value" [(ngModel)]="value"> {{ value }}
</div>

在上述示例中,inputValues变量用于存储逗号分隔的输入值。convertInputToCheckboxes()方法将输入值转换为字符串数组,并将结果存储在checkboxValues变量中。模板中使用ngFor指令循环遍历checkboxValues数组,并为每个值创建一个复选框。通过双向数据绑定,复选框的选中状态与数组中的对应值绑定。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JIRA自定义一个优雅的可多选下拉列表

公司PMO最新发布的规范,需要在每个JIRA故事里输入涉及上线的应用系统名称,最开始就是自定义了一个最简单的文本框,让Owner自己填写,多个系统逗号分隔。...多个checkbox的复选框,对于我们上百个的微服务系统,全部陈列到一个页面,那简直没法看,故而放弃。...步骤如下: 1.继续之前的路径,自定义字段界面,仍然选择Select List(多选); 2.名称随便输入一个你想要在Issue编辑页上显示的名字,比如我这里是叫"Related Applications...from customfield where cfname='Related Applications'; //cfname就是刚才你自定义字段的名称 5.复制如下的代码,将里面的替换为上一步数据库里查询到的...JIRA管理重新进入"自定义字段",选择"编辑",将上一步全局替换完毕的代码黏贴到“描述”中,保存; 7. 退出继续对自定义字段“配置”多个可选项,手动一个一个添加吧...

4.2K00
  • MySql字符串拆分实现split功能(字段分割转列、转行)

    , to_str) 参数名       解释 str        需要进行替换的字符串 from_str     需要被替换的字符串 to_str       需要替换的字符串 举例 将分隔逗号换为空...,根据 help_topic_id 的值来截取第n+1个分隔符之前所有的字符串。...(此处 n+1 是因为help_topic_id 是0开始算起,而此处需第1个分隔符开始获取。)...一些特殊数据,可能字符串拆分出来后缀有的相同,就会造成结果错误,例如以下: 字符串中搜索 ‘23’的位置,‘123’的后缀也是’23’,就会造成结果错误 可以字符串两边都加上逗号,...确保字符串能完全匹配 字符串多列 SELECT -- 截取第一个逗号前边的数据,即为第一个字符串 substring_index( ids, ',', 1 ) id1, -- 52,15字符串中

    13.8K70

    Word中使用通配符查询

    ^z无宽非分隔符^z17无宽可选分隔符^x无宽可选分隔符^x18不间断空格^s不间断空格^s19不间断连字符^~不间断连字符^~20¶段落符号^%表达式( )21§分节符^单词结尾< 22脚注标记^f...2、任意多个字符: “*”可以代表任意多个字符。如: 输入“*国”就可以找到“中国”、“美国”、 “孟加拉国”等字符。...11、表达式查找: “()”,尤其用于多个关键词的组合查找。...键入“(America)(China)”,“替换为”中键入“\2 \1”,Word找到“America China”并替换为“China America”。...使用代码搜索 可以“查找内容”或“替换为”框中使用的代码 段落标记()键入^p(选中“使用通配符”复选框“查找内容”框中无效)或键入^13制表符()键入^t或键入^9ASCII字符键入^nnn,其中

    2.5K10

    Angularjs基础(十)

    实例:当输入框 的值改变时执行函数。         ...ng-change 事件值的每次改变时触发,它不需要等等一个完成的修改过程或等待失去焦点的动作         ng-change 事件只针对输入框值的真实修改,而不是通过JavaScript 来修改...如果ng-checked 属性返回true ,复选框(checkbox) 或单选按钮(radio)将会被选中。         ...如果是字符串,多个类名使用空格分隔。             如果是对象,需要使用 key-value 对,key 是一个布尔值,value 为你想要添加的类名。...实例:输入框的文本拷贝时执行表达式           <input ng-copy="count = count + 1" ng-init="count=0" value="Copy this

    3.3K50

    如何使用EDI系统实现CSV和XML相互转化

    CSV的全称为:Comma-Separated Values(逗号分隔值),是最通用的一种文件格式,可以很容易的导入各种PC表格及数据库中。CSV文件中,每一行数据分别对应数据表的一行。...生成数据表字段用半角逗号隔开。CSV文件用最常见的记事本和Excel都能打开,两者的区别是,用记事本打开显示逗号,用Excel打开,则看不到逗号,因为逗号用来分列了。...2.将特定格式的XML传入CSV端口,转换为CSV文件。如下图所示,为CSV端口的设置界面: CSV端口中,可以对生成的CSV文件进行设置。如:文件名设置、文件路径设置等。...您可以连接设置中自定义生成的CSV文件名。本地文件夹中,您可以选择输入输出以及待处理的文件夹位置。将收发的文件放在特殊位置,有利于统一管理。...CSV端口可以将输入的CSV文件转换为标准的XML文件,而XMLMap 则负责将标准XML转换为处理所需的XML文件。

    3.6K20

    巧用R语言实现各种常用的数据输入与输出

    常用参数的说明如下: (1)file:file是一个带分隔符的ASCII文本文件。 ①绝对路径或者相对路径。一定要注意,R语言中\是转义符,所以路径分隔符需要写成"\\"或者“/”。...(2)header:一个表示文件是否第一行包含了变量的逻辑型变量。 如果header设置为TRUE,则要求第一行要比数据列的数量少一列。 (3)sep分开数据的分隔符。...默认sep="" read.table()函数可以将1个或多个空格、tab制表符、换行符或回车符作为分隔符。...stringsAsFactors = F意味着,“在读入数据时,遇到字符串之后,不将其转换为factors,仍然保留为字符串格式”。 (5)encoding 设定输入字符串的编码方式。...:2.500 #样式4:读数+首行表头+","逗号分割+字符因子factor > df <- read.table("data.csv",header =

    7.5K42

    SQL命令 CREATE INDEX(一)

    field-name - 用作索引基础的一个或多个字段名。字段名必须用括号括起来。多个字段名称用逗号分隔。每个字段名后面可以跟一个ASC或DESC关键字。...AS index-class-name - 可选—定义索引的类,可选地后跟圆括号,圆括号中包含一对或多对逗号分隔的参数名称和关联值。...WITH DATA (datafield-name) - 可选—要定义为索引数据属性的一个或多个字段名。字段名必须用括号括起来。多个字段名称用逗号分隔。...管理门户、系统管理、配置、SQL和对象设置、SQL中,可以通过选择“忽略冗余DDL语句”复选框系统范围内设置此选项(以及其他类似的创建、更改和删除选项)。...指定一个字段名或用逗号分隔的字段名列表,这些字段名用括号括起来。 索引定义中允许并保留重复的字段名。

    1.1K30

    AngularDart 4.0 高级-管道 顶

    介绍Angular管道,这是一种编写显示值转换的方法,您可以HTML中声明这些转换。 尝试一下实例(查看源代码)。 使用管道 管道将数据作为输入并将其转换为所需的输出。...在此页面中,您将使用管道将组件的生日属性转换为人性化的日期。...如果管道接受多个参数,请使用冒号分隔值(如slice:1:5) 修改生日模板以给日期管道一个格式参数。...如果您不这样做,Angular会报告错误。 在前面的例子中,你没有列出DatePipe,因为所有的Angular内置管道都是预先注册的。...纯净的管道 仅当Angular检测到对输入值的纯粹更改时才执行纯管道。 AngularDart中,纯粹的改变仅仅来自对象引用的改变(假设所有东西都是Dart中的对象)。

    6.4K20

    浅谈 Angular 项目实战

    CLI 的使用贯穿整个项目,开发到打包无处不在,这也是 Angular 工程化的体现。...因为 CLI 的参数非常多,必须仔细阅读文档,合理设置参数,所有的需求几乎都能在参数中找到。...不过 Angular 的模板驱动表单并没有复选框的多选绑定,如果有这个需求,可以选择更加灵活强大的响应式表单进行数据绑定。其实,对于数组形式的数据可以使用天然的 select 多选框实现。...然而复选框的 value 值只有 true 或者 false,而 select 多选框的 value 值就是数组。所以 Vue 对复选框的多选操作进行了处理,而 Angular 没有,需要你自己处理。...官方文档中关于表单的内容非常详细,用户输入到绑定再到校验,比着葫芦画瓢就可以轻松实现双向数据绑定。

    4.6K00

    Word最实用的5个技巧,没有几个人全都会

    Word是在办公中经常使用的办公软件,除了需要WordPDF,更需要学会使用Word技巧这是你能提高办公效率的关键,那么今天呢就来给大家分享5个Word中最实用的技巧,这五个技巧没有几个人全都会哦,那还在等什么...一、文本一键表格 Word就是对文本处理比较在行,想要把文本转为表格,很多人以为是需要通过软件将WordEXcel,其实只是通过Word本身就能搞定哦。...如果要把逗号分隔的长字符串转化为5列的表格,只需要轻点几下鼠标: 插入-表格-文本转换成表格; 文字分隔位置选择逗号,其它分隔符手动输入也可以哦。...三、多个图文快速对齐 Word中很多人发现多张图片或者是图文在一起的,是很难进行完美的对齐的,那么该怎么办呢?别急下面来告诉你。 选中对象-格式-对齐页面(左右上下根据需要选择)。...四、导航窗格:想看哪里点哪里 当你阅读的时候,不管是论文还是内容比较多的文档,需要来回的跳转,这样就很麻烦,要是用鼠标滚动的话,那真的会累死哦。 开启导航窗格,想看哪里点哪里!

    86610

    SQL函数 $LISTFROMSTRING

    SQL函数 $LISTFROMSTRING 字符串创建列表的列表函数。...大纲 $LISTFROMSTRING(string[,delimiter]) 参数 string - 要转换为 列表的字符串。此字符串包含一个或多个元素,由分隔分隔。...此字符串可以包含一个或多个子字符串(元素),由分隔分隔。字符串数据元素不得包含分隔符(或字符串),因为分隔符不包含在输出列表中。...delimiter 用于输入字符串中分隔子字符串的字符(或字符串)。它可以是数字或字符串文字(括单引号中)、变量的名称或计算结果为字符串的表达式。...通常,定界符是字符串数据中从不使用的指定字符,但仅用作分隔子字符串的定界符。定界符也可以是多字符串,其中的各个字符可以字符串数据中使用。如果不指定分隔符,则默认分隔符是逗号 (,) 字符。

    72630

    一个可以把web表单变成会话形式的开源框架

    一个web表单(webform, web form 或者HTML form)可以将用户输入的数据发送到服务器进行处理。...因为互联网用户使用复选框、单选按钮或文本字段填写表格,所以web表单的形式类似文件或数据库。例如,表单可以用于输入航运或信用卡资料以订购产品,或者可以用于搜索引擎中检索数据。...这些都是互联网诞生以来就有的。毫无疑问,你每天都在网络上与至少一个表单打过交道。 我们看来,是时候该有人来改进一下它们了。 介绍 我们相信我们可以做得比我们今天在网上见到的形式更好。...只需使用cf-questions标签,并用管道符号("|")分隔每个变体,比如这个: <input cf-questions=”Hi there!|Hello!|Sup?”...conversational-interfaces/introducing-the-conversational-form-c3166eb2ee2f 关于转载如需转载,请在开篇显著位置注明作者和出处(

    1.7K50
    领券