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

如何在输入中选择的字符串上设置ngIf?

在Angular中,可以使用ngIf指令来根据条件动态显示或隐藏HTML元素。要在输入中选择的字符串上设置ngIf,可以按照以下步骤进行操作:

  1. 在组件的HTML模板中,找到要设置ngIf的HTML元素。
  2. 使用双花括号{{}}将输入的字符串绑定到一个组件属性上。例如,假设输入的字符串是通过组件的input属性传递的,可以这样绑定:<div *ngIf="input === '要选择的字符串'">...</div>
  3. 在ngIf指令中,使用条件表达式来判断输入的字符串是否满足特定条件。可以使用比较运算符(如===、!==、<、>等)或逻辑运算符(如&&、||等)来构建条件表达式。
  4. 在ngIf指令的值中,根据条件表达式的结果来决定是否显示HTML元素。如果条件表达式为真,则元素将显示出来;如果条件表达式为假,则元素将被隐藏。

以下是一个示例,展示了如何在输入中选择的字符串上设置ngIf:

代码语言:html
复制
<div *ngIf="input === '要选择的字符串'">
  这是要选择的字符串的内容。
</div>

在上面的示例中,如果输入的字符串与'要选择的字符串'相等,那么这个div元素将被显示出来。如果输入的字符串不等于'要选择的字符串',那么这个div元素将被隐藏起来。

对于腾讯云相关产品和产品介绍链接地址,由于不能提及具体的品牌商,建议您访问腾讯云官方网站,查找与云计算相关的产品和服务。

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

相关·内容

何在ubuntu18.04设置使用中文输入使用

ubuntu 在最新版本已经可以不用用户自己单独去下载中文输入法使用了,本次使用为 ubuntu18.04LTS版本(登陆是界面选择是ubuntu on wayland),设置方式非常简单 1、打开设置...,不知道请点击右上角工具栏即可看到。...2、找到设置语言项,点击语言安装管理,安装中文语言后选择输入方式。 ? ? 点击关闭,然后添加输入语言,在其中找到中文拼音添加即可 ? ? ? ?...可以看到中文输入法已经存在了,点击选择即可使用了,输入法看上去停像 sunpinyin,不管它了。如果要使用搜狗的话选择输入方式时请选择 XIM 方式。...以上就是本文全部内容,希望对大家学习有所帮助。

3.2K21
  • AngularDart 4.0 高级-结构指令 顶

    在此示例,星号(*)在指令属性名称前面。 {{hero.name}} 没有方括号。 没有圆括号。 只要*ngIf设置为一个字符串。...您可以在分配给ngFor字符启用这些功能,这是您在Angularmicrosyntax编写。...microsyntax解析器将该字符串转换为上属性: let关键字声明了模板引用模板输入变量。这个例子输入变量是hero,i和odd。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板单个实例引用。...它可以在整个模板任何地方访问。 模板输入和引用变量名称都有其自己名称空间。 let herohero变量永远不会和#herohero一样。

    16.1K20

    AngularDart4.0 指南- 模板语法二 顶

    他们在输入输入文字。 他们从列表中选择项目。 他们点击按钮。 这样用户操作可能导致数据流向相反方向:从元素到组件。 了解用户操作唯一方法是侦听某些事件,例如按键,鼠标移动,点击和触摸。...在此示例,将指令绑定到条件表达式,isActive。 不要忘记ngIf前面的星号(*)。...警惕隐藏大型组件树; NgIf可能是更安全选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量。 ngFor指令迭代由父组件heroes属性返回heroes,并在每次迭代期间将hero设置为列表的当前项目。...模板引用变量警告说明 模板引用变量(#phone)与模板输入变量(let phone)不同,您在*ngFor可能看到那样。 了解“结构指令”指南中差异。 引用变量范围是整个模板。

    29.9K20

    Angular 6.x 表单快速入门

    第一节 - 创建最简单输入框 如何实现双向绑定? 在 Angular 表单,我们通过 ngModel 指令来实现双向绑定。...目前 Angular 支持内建 validators 如下: required - 设置表单控件值是非空 email - 设置表单控件值格式是 email min - 设置表单控件值最小值 max...- 设置表单控件值最大值 minlength - 设置表单控件值最小长度 maxlength - 设置表单控件值最大长度 pattern - 设置表单控件值需匹配 pattern 对应模式...在 Angular ,我们可以通过 #userName="ngModel" 方式获取 ngModel 对象,然后通过该对象 errors 属性,来获取对应验证规则 ( required, minlength...required">请您输入用户名 <div *ngIf="userName.errors?.

    4.6K20

    AngularDart4.0 英雄之旅-教程-04明细 顶

    ngFor指令遍历组件英雄列表并为该列表每个英雄呈现该模板一个实例。 表达式部分将hero标识为模板输入变量,其中包含每个迭代英雄详情。...用包装模板HTML英雄细节内容。 然后添加ngIf核心指令并将其设置为selectedHero!= null。...当用户选择一个英雄时,selectedHero变为非null,ngIf将英雄详细内容放入DOM,并评估嵌套绑定。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor更多信息。 格式化选中hero 当选择英雄细节显示在列表下方时,很难在列表识别选定英雄。...您将Hero类移到lib / src下自己文件。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor。

    3K30

    Angular 从入坑到挖坑 - 表单控件概览

    一、Overview angular 入坑记录笔记第三篇,介绍 angular 中表单控件相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...四、Step by Step 4.1、表单简介 用来处理用户输入,通过从视图中捕获用户输入事件、验证用户输入是否满足条件,从而创建出表单模型修改组件数据模型,达到获取用户输入数据功能 模板驱动表单...,从而生成错误信息列表 在进行用户输入数据有效性验证时,在控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件状态信息,之后就可以通过获取错误信息列表来进行反馈 姓名信息不能少于 4 个字符长度 姓名信息不能少于 4 个字符长度 <div *ngIf="name.errors.nameInvalid

    18.9K20

    Angular 结构指令模式 - 它们是什么且怎么使用

    如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式知识点。...这会将其转换为方括号 [] 属性绑定,比如 [ngIf]。 其余部分,包含类名,插入到 里。...要使用结构指令,我们需要在 HTML 模版添加一个带有指令元素。然后根据我们在指令设置条件或者表达式添加、删除或者替换元素。 结构指令例子 我们添加些简单 HTML 代码。...ngIf 跟 if-else 很类似。 当表达式是 false 时候,*ngIf 指令移除 HTML 元素。当为 true 时候,元素副本会添加到 DOM 。...当条件值是 true 时候,相关元素就会被渲染到 DOM ,其余元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 元素到 DOM

    3.8K20

    AngularDart4.0 指南- 显示数据 顶

    使用插值,可以将属性名称放在视图模板,并用双花括号括起来:{{myHero}}。 按照设置说明创建名为displays_data新项目。...怎样创建? @Component注解CSS选择器指定了一个名为元素。...这是语法重要组成部分。 有关更多信息,请参阅模板语法页面。 注意ngFor指令hero变量; 它是模板输入变量一个例子。...在“模板语法”页面的microsyntax部分阅读有关模板输入变量更多信息。 Angular为列表每个项目复制,将hero变量设置为当前迭代项目(英雄)。...现在英雄出现在一个无序列表。 ? 为数据创建一个类 应用程序代码直接在组件内定义数据,这不是最佳实践。 但是,在一个简单演示,没关系。 目前,绑定是一个字符串列表。

    5.3K10

    Angular快速学习笔记(3) -- 组件与模板

    它是语法不可或缺一部分 通过 NgIf 进行条件显示 有时,应用需要只在特定情况下显示视图或视图一部分,这个时候使用ngif,同vue.js里v-if <p *ngIf="heroes.length...在正常 HTML 开发过程,你使用 HTML 元素来创建视觉结构, 通过把字符串常量设置到元素 attribute 来修改那些元素。...输入属性是一个带有 @Input装饰器设置属性。...Angular 管道对像这样小型转换来说是个明智选择。 管道是一个简单函数,它接受一个输入值,并返回转换结果。 它们很容易用于模板表达式,只要使用管道操作符 (|) 就行了。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。

    15.2K30

    ionic3应该善用组件和指令

    其实就是模版指令,ngIf,当条件为true时,该元素会被添加到DOM。其主要依赖TemplateRef和ViewContainerRef来完成操作。...与其他指令不同,它描述是一个视图,是用户可以直接看到东西。 自定义属性指令 实例:创建一个bgColor属性指令,支持传入颜色名参数,设置目标标签背景色 1)创建指令。...指令效果.png 4)指令扩展,支持输入参数。 上述指令是一个很简单指令,且很不灵活,因为颜色写死为red了,实际上我们使用场景应该支持多种颜色。...自定义结构指令 实例:山寨一个*ngIf收缩显示指令,仅为了起到抛砖引玉效果。...如果几乎不需要复用东西,直接用内置指令实现就好了,否则就要考虑自定指令了,能让你项目结构更清晰化,至于选择哪种,自己静下心来想一下就好了。

    3.5K40

    查找大小为 M 最新分组

    题目 给你一个数组 arr ,该数组表示一个从 1 到 n 数字排列。有一个长度为 n 二进制字符串,该字符串上所有位最初都设置为 0 。...在从 1 到 n 每个步骤 i (假设二进制字符串和 arr 都是从 1 开始索引情况下),二进制字符串上位于位置 arr[i] 位将会设为 1 。...给你一个整数 m ,请你找出二进制字符串上存在长度为 m 一组 1 最后步骤。一组 1 是一个连续、由 1 组成子串,且左右两边不再有可以延伸 1 。...示例 1: 输入:arr = [3,5,1,2,4], m = 1 输出:4 解释: 步骤 1:"00100",由 1 构成组:["1"] 步骤 2:"00101",由 1 构成组:["1", "1...1 <= arr[i] <= n arr 所有整数 互不相同 1 <= m <= arr.length 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems

    45730

    Angular 从入坑到挖坑 - 组件食用指南

    一、Overview angular 入坑记录笔记第二篇,介绍组件相关概念,以及如何在 angular 通过使用组件来完成系统功能实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间交互...dom 元素外观或行为 NgClass:用来设置元素多个 css 类属性,如果只设置一个 css 类,应该使用模板绑定语法 class 类绑定 <p [ngClass]="inlineStyle...NgSwitch:根据条件切换,从候选<em>的</em>几个元素中<em>选择</em>匹配<em>的</em>,放到 dom 元素<em>中</em> 请<em>选择</em>配置 <option value...管道 作用 JsonPipe 将一个值转换成 json <em>字符</em>串 DatePipe 根据区域<em>设置</em>规则格式化日期值 UpperCasePipe 把文本转换成全大写形式 LowerCasePipe 把文本转换成全小写形式...@Input 装饰器获取到<em>的</em>父组件数据,可以通过<em>输入</em>属性<em>中</em><em>的</em> setter 方法中进行重新赋值 ?

    15.8K30
    领券