动态生成角度为2的输入字段类型并设置字段的类型

2024-02-25

我是 Angular 2 的新手,尝试根据使用 Angular 2 的模型动态生成一堆输入字段。有些字段是密码字段。如果是的话,我想让输入字段输入密码。我写过这样的东西:

<div *ngFor="let field of connector.type.configFields">
    <label>{{field.name}}</label>
    <input [(ngModel)]="field.value" />
</div>

现在的问题是,如果 field.name 是密码,我想将字段设置为密码 我正在考虑在输入中添加类似的内容

<div *ngFor="let field of connector.type.configFields">
    <label>{{field.name}}</label>
    <input [(ngModel)]="field.value" *ngIf="field.name =='Password'" type="password"  />
</div>

现在,如果我这样做,所有其他不是密码的字段都不会被渲染。仅呈现密码字段。我做错了什么。(我对 angular2 很陌生)


这可能有效,但据我记得,设置type不支持动态(但可能值得一试):

<input [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'"/>

这是安全的选择:

<input [(ngModel)]="field.value" *ngIf="field.name === 'Password'" type="password"  />
<input [(ngModel)]="field.value" *ngIf="field.name !== 'Password'" type="text"  />

If field.name is 'Password',第一个输入被添加,否则第二个输入被添加到 DOM 中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

动态生成角度为2的输入字段类型并设置字段的类型 的相关文章

  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 具有 100% 高度行和 Internet Explorer 9 的表格

    我有以下示例 div style height 150px background color AAAAFF div
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee
  • 如何在 Angular 4 中翻译 mat-paginator?

    你知道如何在 Angular 中翻译 每页项目 吗mat paginator标签 这mat paginator是材料设计中的一个元素 您可以使用MatPaginatorIntl为了这 威尔 豪厄尔制作 https github com an
  • 图像随机损坏(但刷新后加载)并显示“资源解释为图像但使用 MIME 类型 text/html 传输”

    我目前正在开发一个简单的 php 网站 问题是 我的整个网站中的图像 发生在所有 php 文件中 随机损坏并显示错误资源解释为图像 但以 MIME 类型 text html 传输但是 如果我尝试多次刷新页面 可以再次加载图像并且错误消失 我
  • 我可以在元标记中使用 HTML 字符实体吗?

    我有一个有两种语言的网站 英语和中文 在使用 UTF 8 字符集的英文主页中 我有 例如 这出现在搜索结果中 我想将其更改为 在哪里 20013 25991 是 中文 的 ISO 实体 搜索结果中会显示为 中文 吗 我无法将 中文 直接粘贴
  • 在 Angular 5 中,如何从父组件访问动态添加的子组件?

    我正在开发一个 Ionic Angular 5 项目 我需要动态加载一些组件 继动态组件加载器示例 https angular io guide dynamic component loader在 Angular 文档中 我能够成功加载组件
  • 为什么开发者讨厌 iframe? [复制]

    这个问题在这里已经有答案了 可能的重复 iframe 被认为是 不好的做法 吗 https stackoverflow com questions 362730 are iframes considered bad practice 在与
  • 只能通过bootstrap将服务注入到服务中吗?

    我正在尝试连接一个使用 Http 服务的基本 Angular2 应用程序 我见过的大多数教程都是通过Component消耗Http服务 这似乎是错误的 除非瘦控制器的基本理念已经改变 但这是一个不同的问题 我想创建一个使用 Angular
  • jQuery:离线后 POST 出错(iOS 和 Chrome)

    我构建了一个具有离线功能的 HTML5 Web 应用程序 使用 AppCache 程序流程为 Online 在网络上时 应用程序预加载一些基本信息 工作 Offline 用户拿着装有应用程序的平板电脑offline 然后在应用程序上执行他们
  • 如何在有序列表中组合数字和字母?

    如何在 CSS 中用数字和字母递增有序列表 ol nested margin bottom 0 counter reset item ol nested li display block position relative ol neste
  • 带纱线的 Angular CLI

    如何将 Angular Cli v6 0 3 的包管理器更改为yarn 我试过 ng set global packageManager yarn 但 Angular 说 get set 已被弃用 取而代之的是 config 命令 ng c
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 为什么我不能在 Angular 模板中定义内联函数?还能怎样做呢?

    我正在使用 Angular 2 而且是新手 我想为单击按钮调用一个小函数 所以我尝试这样做 也许是因为我来自 React 背景
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • Angular:如何动态更改 scss 变量?

    我对 scss 很陌生 所以我想知道是否可以使用组件的 Typescript 来更改 scss 变量 所以考虑一下 html div div scss thememode theme1 textcolormode nonHover colo
  • 不可勾选的单选按钮与专有的复选框

    从 UI 角度来看 是拥有一组具有取消选中功能的单选按钮更好 还是拥有一组独占的复选框 意味着一次只能选中一个 更好 Update 我没想到对此会有如此负面的反应 如果我给出一个更接近其使用方式的示例 也许会有所帮助 我有一个充满数据绑定内
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu

随机推荐

  • 如何将表从转储恢复到数据库?

    我使用 pg dump 创建表转储 pg dump h server1 U postgres t np points gisurfo gt D np point sql 当我进入 psql 并说 f D np point sql 但获取标准
  • 从多个线程中选择同一个文件描述符

    如果我打电话会发生什么select来自多个线程的同一个打开的文件描述符 这有记录在某处吗 根据POSIX 2008select http pubs opengroup org onlinepubs 9699919799 functions
  • 复选框和单选按钮

    复选框是否有权像单选按钮一样工作 我正在开发一个测验应用程序 其中选项具有单选按钮的行为 并且选项的图标像复选框一样 我是否可以将复选框分组为我们将单选按钮分组 如果您想要看起来像复选框的单选按钮 将RadioButton的样式设置为 an
  • GNU Flex 库 libfl 提供什么?

    我可以从 flex 和 bison 生成的文件编译一个程序 cc lex yy c program tab c o output 也由 cc lex yy c program tab c lfl o output 它们都运行顺利 没有任何问
  • 通过 GenericEntity> 在 RESTful Response 对象中使用 Java 泛型模板类型

    我有一个通用的 JAX RS 资源类 并且我已经定义了一个通用的findAll method public abstract class GenericDataResource
  • 为什么Complete输出模式需要聚合?

    我在 Apache Spark 2 2 中使用最新的结构化流处理并遇到以下异常 org apache spark sql AnalysisException 完整输出模式不 当流上没有流聚合时支持 数据框 数据集 为什么完整输出模式需要流式
  • 禁止访问消息以防止从 Excel 重复导入

    我正在将数据从 Excel 导入到 Access 中的现有表中 并希望抑制以下消息 我尝试使用多字段索引将新记录导入表中 并且还尝试首先导入临时表 然后将新记录附加到现有表中 然而 在这两种情况下 它仍然会弹出以下消息 我想避免用户看到该消
  • 使用 Linq 查询 Xml 文件中的记录

    以下是我的 xml 文件 我必须为每个页面和每个类型获取以逗号分隔的字符串提到的字段 请帮助了解如何继续使用 Linq 示例 如果我想为 page1 定义 Type customFields 则必须以逗号分隔输出 项目ID 员工ID 员工姓
  • 同一个Python解释器实例同时运行多个脚本?

    6 7 年前 我看到了一种在资源紧张的 env 上运行 python 的倡议 只需运行解释器一次 同时允许多个脚本同时使用它 这个想法是节省解释器启动开销并节省 RAM 是否存在类似的东西 这个问题Python 从同一个解释器同时执行多个脚
  • Scanf 漏行

    我编写了一个测试程序 它应该接受 3x3 字符矩阵并输出输入的矩阵 但是 我必须输入 4 行才能让程序生成相应的矩阵 我已经查找了 scanf 函数的问题 但我尝试过的解决方案似乎都不起作用 你能帮我解决这个问题吗 My code incl
  • Paramiko Python:IOError:[Errno 13]权限被拒绝

    问题 我可以做类似的事情吗 self sftp put sourceFilePath final destination use sudo True 我可以创建文件夹 但不能创建文件 我需要显式调用 sudo 或在 paramiko 中设置
  • 从 CSV 文件创建 Networkx 图表

    我正在尝试构建一个 NetworkX 社交网络图CSV file https github com MelissaLaurino DolphinSocialNetwork Laurino blob master test csv 我正在使用
  • java 字符串分割

    如果我想分割任意字符串的字符 考虑有间隙和无间隙 该怎么办 例如 如果我有字符串My Names James我希望每个角色都像这样 M y n a m e s etc 你是这个意思 String sentence Hello World S
  • 该方法必须重写超类方法

    最近我将计算机更新到 Ubuntu 11 10 64 位 我在导入项目时遇到问题 它给了我一个错误 方法 onView 必须重写超类方法 我在其他一些帖子中读到错误应该是使用java 1 5 但是Ubuntu 11 10附带了open 6
  • Laravel 核心方法混乱

    我一直在挖掘 Laravel 的核心 因为我想了解它是如何工作的 但我想出了一个方法 即使三天后我也无法理解 在 start php 中 应用程序与其自身绑定 到目前为止 一切都很好 但是当我检查 app gt share 方法时我迷失了
  • 将函数应用于数据框中的每一列,观察每列现有的数据类型

    我正在尝试获取大数据框中每列的最小值 最大值 作为了解我的数据 我的第一次尝试是 apply t 2 max na rm 1 它将所有内容视为字符向量 因为前几列是字符类型 所以一些数字列的最大值是 99 5 然后我尝试了这个 sapply
  • SQL 聚合函数别名

    我是 SQL 初学者 这是我被要求解决的问题 假设大城市被定义为place类型的city人口为 至少100 000 编写返回方案的 SQL 查询 state name no big city big city population 订购st
  • 无法使用 SES 接收 S3 存储桶中的电子邮件

    我正在尝试创建一个系统 其中电子邮件将发送到我公司的邮箱 并且 S3 存储桶将存储这些电子邮件 每当存储新电子邮件时 都会触发 Lambda 函数来存储电子邮件并回复发件人 第二部分 然而 我没有成功地实现第一部分 我有一个托管在 AWS
  • 在 Web API 控制器中接收 Json 反序列化对象作为字符串

    以下是我从 Ui 输入的 Json data Id 1 Id 2 Id 3 我可以在如下所示的对象结构中没有问题地接收它 public class TestController ApiController
  • 动态生成角度为2的输入字段类型并设置字段的类型

    我是 Angular 2 的新手 尝试根据使用 Angular 2 的模型动态生成一堆输入字段 有些字段是密码字段 如果是的话 我想让输入字段输入密码 我写过这样的东西 div div