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

如何检查两个不同的子下拉列表在Angular 7中是否具有相同的值?

在Angular 7中,可以通过以下步骤来检查两个不同的子下拉列表是否具有相同的值:

  1. 首先,确保在组件的HTML模板中定义了两个子下拉列表,并且它们都绑定到了相应的数据源。
代码语言:txt
复制
<select [(ngModel)]="firstDropdownValue">
  <option *ngFor="let option of firstDropdownOptions" [value]="option">{{ option }}</option>
</select>

<select [(ngModel)]="secondDropdownValue">
  <option *ngFor="let option of secondDropdownOptions" [value]="option">{{ option }}</option>
</select>
  1. 在组件的TypeScript文件中,定义两个变量来存储下拉列表的值。
代码语言:txt
复制
firstDropdownValue: string;
secondDropdownValue: string;
  1. 创建一个方法来检查两个下拉列表的值是否相同。
代码语言:txt
复制
checkDropdownValues(): boolean {
  return this.firstDropdownValue === this.secondDropdownValue;
}
  1. 在需要的地方调用该方法,例如在点击按钮时。
代码语言:txt
复制
<button (click)="checkDropdownValues()">检查值</button>
  1. 根据检查结果,可以采取相应的操作。例如,可以显示一个提示消息或执行其他逻辑。

请注意,以上步骤仅提供了一个基本的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。

关于Angular 7的更多信息和相关概念,您可以参考腾讯云的Angular产品文档:Angular产品介绍

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

相关·内容

前端面试题angular_Vue前端面试题

避免这类问题出现办法是,始终将页面中元素绑定到对象属性(data.x)而不是直接绑定到基本变量(x)上。 2,ng-repeat迭代数组时候,如果数组中有相同,会有什么问题,如何解决?...AngularJSscope变量中使用脏检查来实现了数据双向绑定,并且可以通过scope.watch来监听变化触发回调; angular中使用是脏检查机制,angular中每次你绑定一些东西到你...当浏览器接受到可以被angular context处理事件时就会触发digest循环,这个循环是由两个更小循环组合起来,一个是watch列表,一个是evalAsync列表,而watch列表digest...循环中被“脏检查”解析,digest将会遍历我们watch,然后询问它是否有属性和变化,直到watch队列都检查过,检查数据变化时候,由于并不知道这个事件是对哪些数据进行了更改,以及这个事件有可能造成事件之外其他任何地方数据更改...分属不同团队进行开发 angular 应用,如果要做整合,可能会遇到哪些问题,如何解决? 可能会遇到不同模块之间冲突。

14.1K20

codereview-s8

$event.stopPropagation() } 也可以对比$event对象中target和currentTarget属性是否相同,因为这两个属性分别代表触发事件dom节点与响应事件的当前节点... 当两个下拉菜单处于垂直布局时,如果没有设置z-index属性,因为dropdown-toggle比dropdown-list先出现,因此默认图层顺序是前者高于后者,所以当上面的下拉菜单出现时候...angular中遭遇一个奇葩问题 这个问题是我本期开发排班器组件时遇到一个很奇葩问题,大体描述就是如上面github链接中描述一样,就是当父组件一个数据采用双向绑定时,并且需要已事件回调方法更新其内部某个属性...但是angular中遇到奇葩现象现象就是,父组件进行更新时,不知道是因为签名缘故还是双向绑定缘故,这个onChange都会先于组件运行一次,那么问题来了,这个方法本来调用时机是组件更新后需要通知父组件进行相应更新时调用...来进行,那么父组件或组件中对于这一个数据引用均是相同,而不会像基本数据类型存在一个新旧差异,不过这终究是一个workaround。

1.7K30
  • 180多个Web应用程序测试示例测试用例

    17.检查下拉列表选项是否可读并且由于字段大小限制而不被截断。 18.页面上所有按钮都应该可以通过键盘快捷键访问,并且用户应该能够使用键盘执行所有操作。 19.检查所有页面上是否有损坏图像。...2.检查窗口大小是否正确。 3.检查页面上是否有任何具有默认焦点字段(通常,焦点应设置屏幕第一个输入字段上)。 4.关闭父窗口/打开器窗口时,检查窗口是否已关闭。...9.检查窗口取消按钮功能。 数据库测试测试方案 1.成功提交页面后,检查是否在数据库中保存了正确数据。 2.检查不接受空。 3.检查数据完整性。数据应根据设计存储单个或多个表中。...页面上和数据库模式中显示给用户字段长度应该相同。 16.检查具有最小,最大和浮点数字字段。 17.检查带有负值数字字段(接受和不接受)。...18.检查单选按钮和下拉列表选项是否正确保存在数据库中。 19.检查数据库字段设计是否具有正确数据类型和数据长度。 20.检查所有表约束(例如主键,外键等)是否正确实现。

    8.3K21

    AngularDart 4.0 高级-结构指令 顶

    Angular拥有强大模板引擎,可以让我们轻松操纵元素DOM结构。 本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己结构指令来完成相同操作。 尝试一下实例(查看源代码)。...NgFor指令具有比本指南中显示NgIf更多功能,包括必需和可选。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...这些是两个NgFor输入属性名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己上下文对象属性。...Angular不会允许。 您仅可以将一个结构指令应用于宿主元素。 原因是简单。 结构指令可以用宿主元素及其后代完成复杂事情。 当两个指令声明相同宿主元素时,哪一个优先?...你指令构造函数中注入这两个类作为类私有变量。

    16.1K20

    AngularJS 使用ngOption实现下拉列表

    最近使用到了ngOption实现下拉选择列表,由于需要实现分组等功能,百度了下没有太好文章,就百度到一篇英文帖子,按照其中代码很顺利搞定了。...本篇根据文中代码,详细讲述下如何实现下拉列表 更多内容参考:AngularJS知识总结 下拉列表简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定...; 另一个是ng-options用于确定下拉列表元素数组。...} }; 当然也可以直接指定成: $scope.engineer = {currentActivity:activities[3]} 然后指令中可以循环列表拼接处下拉名称...当你选择一个下拉列表选项时候,就会覆盖掉这个初始。 所以更多时候会使用一个id进行标识,这样初始化赋值时候,只需要设定一个id就可以了。

    2.2K100

    2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

    digest周期中,所有watch 表达式或方法将会检查变化,检查到后, Scope destruction / 销毁 当作用域不在需要时候,作用域创建者通过作用域destroy()API 去销毁...指令和创建作用域 大多数情况,指令和作用域交互不创建新作用域。无论如何,一些指令,像是ng-controller和ng-repeat,创建作用域并且将作用域赋予相对应dom元素上。...查看ng-controller了解更多信息 作用域$watch性能考虑 作用域脏检查属性变动angular中是一个常规操作,所以脏检查函数需要尽可能快。...这个循环由两个小循环构成,一个用来处理evalAsync队列,另一个用来处理监听列表。...watch列表是一个自从最后一次便利后表达式里修改集合。如果有一个修改被检测到了,那么watch函数被调用用于更新dom为新

    13.2K20

    AngularDart4.0 指南- 依赖注入 顶

    注册providers最常用方法是使用任何具有providers列表参数Angular注解。 其中最常见是@Component。...组件注入器 例如,当Angular创建一个具有@Component.providers组件新实例时,它也为该实例创建一个新注入器。...provide()函数接受与Provider构造函数相同参数。 provide()函数不能用在Angular注解提供者列表中,因为注释只能包含const表达式。...像EvenBetterLogger一样,HeroService需要一个关于用户真实信息。 它需要知道用户是否有权查看秘密英雄。 单个应用程序会话期间,该授权可能会更改,例如您登录不同用户。...一个关键好处是强大静态检查:如果你拼错一个属性名称或给它分配一个错误类型,你会被提前警告。 Dart级联符号(..)提供了初始化配置对象便捷方法。

    5.7K20

    Vuejs和其他前端框架对比

    例子如下,我们可以看看下面这个列表HTML中代码是如何: item 1 item 2 而在JavaScript...而vue-cli则有模板列表可选,能按需创造不同模板,使用起来更灵活一点。 事实上说,两个工具都非常好用,都能为你建立一个好环境。...相同之处在于,两个框架都专注于UI层,其他功能如路由、状态管理等都交由同伴框架进行处理。 而不同之处是在于它们如何关联它们各自配套框架。...(如,desktop和mobile有不同功能,可以通过注入不同service实现,而共用相同template和directive)。Vue则需要程序员自己规划代码组织,用来支持共享组件。...测试Angular2一开始就设计好了如何对组件进行测试,而Vue组件虽然也很好写测试,但是没有官方推荐唯一标准(当然,对视图是否需要测试还有待探讨)。

    3.8K110

    AngularDart 4.0 高级-生命周期钩子 顶

    Angular提供生命周期挂钩,提供这些关键生命时刻可视性以及发生时行为能力。 指令具有相同生命周期挂钩集,减去特定于组件内容和视图挂钩。...ngAfterViewChecked Angular检查组件视图和视图之后作出响应。 ngAfterViewInit和后续每次ngAfterContentChecked之后调用。...构造函数不应仅仅将初始局部变量设置为简单。 ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性构建之后才会设置。...这个钩子迭代已更改属性并记录它们。 示例组件OnChangesComponent具有两个输入属性:hero和power。...回想一下,调用AfterView钩子之前,Angular调用了AfterContent两个钩子。 完成该组件视图之前,Angular会完成投影内容组合。

    6.2K10

    vue.js与其他前端框架对比

    例子如下,我们可以看看下面这个列表HTML中代码是如何: item 1 item 2 而在JavaScript...而vue-cli则有模板列表可选,能按需创造不同模板,使用起来更灵活一点。 事实上说,两个工具都非常好用,都能为你建立一个好环境。...相同之处在于,两个框架都专注于UI层,其他功能如路由、状态管理等都交由同伴框架进行处理。 而不同之处是在于它们如何关联它们各自配套框架。...(如,desktop和mobile有不同功能,可以通过注入不同service实现,而共用相同template和directive)。Vue则需要程序员自己规划代码组织,用来支持共享组件。...测试Angular2一开始就设计好了如何对组件进行测试,而Vue组件虽然也很好写测试,但是没有官方推荐唯一标准(当然,对视图是否需要测试还有待探讨)。

    4.2K80

    AngularDart 4.0 高级-路由概述 顶

    当用户点击按钮,从下拉框中选择,或者响应来自任何来源其他刺激时,您都可以进行命令式导航。并且路由器浏览器历史记录中记录活动,所以后退和前进按钮也起作用。...引导您应用时注册适当路由器提供商。 确保每个路由组件都具有列出组件使用路由器指令元数据。 有关详细信息,请参阅声明路由器提供程序和指令。...RouterLink 将可点击HTML元素绑定到路由指令。 单击具有绑定到链接参数列表routerLink指令元素会触发导航。...危机详情显示列表下方同一页面上视图中。 改变危机名称。 请注意危机列表相应名称不会更改。 ?...与英雄细节不同,当您键入更新时,危机细节更改是暂时,直到您通过按下“Save”或“Cancel”按钮保存或放弃它们。 这两个按钮都回到危机中心及其危机列表。 不要单击任一按钮。

    6.1K20

    扩展 Vue 组件

    是否开发基于 Vue app 时使用过具有相同属性甚至具有相同 template 结构组件?...这时,创建一个具有通用属性和 HTML 结构 “基组件” 并以此扩展并创建出其 “组件” 是一种比较好做法。...示例: 调查问卷 这里有一个使用 Vue.js 制作调查问卷: 你可以很明显地注意到每一个问题都有一个与之相关 input 类型: 文本输入 下拉选择 单选按钮 良好工程结构应该将这些问题(不同...比如,如果 props 属性拥有不同属性名, 很明显他们都会被包含在内,但是如果他们拥有相同属性名, Vue 只会保留组件响应属性。...对于这个例子,我更倾向于使用 extends, 尽管如此,两种方式使用合并策略有轻微不同,使用extends使得组件自身选项会比要扩展基组件具有更高优先级。

    1.7K20

    AngularDart4.0 指南-体系结构概述 顶

    模板是一种HTML形式,告诉Angular如何呈现组件。 模板看起来像普通HTML,除了一些不同之处。...自定义组件与原生HTML相同布局中无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。 回顾HeroListComponent代码,你可以看到它只是一个类。...添加绑定标记到模板HTML告诉Angular如何连接双方。 如图所示,有四种形式数据绑定语法。 每个表单都有一个方向 - 从DOM到DOM,或者两个方向。...用户更改也会返回到组件,将属性重置为最新,就像事件绑定一样。 Angular每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树根到所有组件。 ?...但它并不包括你需要知道一切。 以下是其他重要Angular功能和服务简短字母顺序列表。 Forms:支持基于HTML验证和脏检查复杂数据录入方案。

    7.9K30

    常用表单元素有哪些_h5新增表单元素属性

    今天小课堂主要内容是,input表单应用,还有html5中新增属性。 表单元素是允许用户表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息元素,最主要作用就是收集信息。...可设置type属性,从而具有不同功能。 6. textarea: 定义文本域(一个多行输入控件),默认可通过鼠标拖动调整大小。 7. button: 定义一个按钮。...8. select: 定义一个选择列表,即下拉列表。 9. option: 定义下拉列表选项。 接下来是对这些表单元素具体分析。...2. pattern:一个正则表达式,用于检查控件,可作用于text、search、tel、url、email类型input。...5. readonly:一个boolean,表明该input是否能被用户修改,可用于信息展示等页面。

    3.4K30

    Ubuntu 18.04上安装Angular图文详解

    在这篇文章中,我将向您展示如何在Ubuntu 18.04上安装AngularAngular是一个用于制作令人敬畏网站前端Web开发框架。...这篇文章是一系列Angular文章中第一篇,旨在帮助您开始Angular 7中创建网站。 我们将首先学习如何在Ubuntu 18.04上安装Angular 7。...root@linuxidc:~# npm install -g @angular/cli 安装完成后,检查是否安装正确。...安装过程将开始下拉所需Angular模块,并为我们新应用程序创建目录结构 运行我们申请 首先更改为我们应用程序新创建目录。...您将看到您新应用程序。如下图所示: 这只创建了一个非常基本Angular应用程序框架。 本系列下几篇文章中,我们将了解它所创造内容。

    2.8K00

    几个简单步骤教你GitHub Pages上部署Angular应用!

    因此,本文中,我将以发布应用程序相同方式来解释该过程。...我已经Angular中开发了这个简单Todo应用程序,其中我将通过以下简单步骤来说明如何在GitHub Pages上进行部署... ? ?...转到您app文件夹,并检查docs文件夹是否已创建并包含所有可分发文件。 ? 现在,通过git bash窗口中运行以下命令,将该文件夹提交到本地存储库中,并将其推入GitHub存储库中。...配置GitHub存储库以GitHub Pages上发布 将docs文件夹推送到GitHub存储库后,您需要打开存储库设置,然后转到GitHub Pages部分,然后从source下拉列表中选择“ master...现在,浏览器窗口中打开已部署应用程序GitHub Pages URL,以检查应用程序是否已成功部署GitHub Pages上。

    1.8K20

    Blazor 中路由和路由模板

    过去 ASP.NET Web 窗体和现代 Web 明显区别在于 Web 服务器入口是否存在路由组件。 Web 窗体中,绝大多数 Web 终结点都是物理文件资源,直接通过其页面路径调用。...客户端上,路由器参与多种情况,最常见情况是用户单击链接、表单上提交按钮或下拉列表中触发服务器调用项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径整个过程。...与 Angular 路由器不同,它在获取路由参数后无法异步运行解析步骤。最后,Blazor 路由器不支持条件重定向到备用路由 - 这也是 Angular 路由器可以做到。... ASP.NET 中,路由参数被分配给匹配控制器方法形参。 Blazor 中,情况略有不同具有可比性。...正常情况下,如果没有任何预防措施,它可能会产生异常,因为文本被填充到整数容器中。如果需要确保应有参数位置仅指定给定类型,则应选择路由约束。

    8.4K21

    Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    成功匹配时,它会应用重定向,此时路由器会构建ActivatedRoute对象树,同时包含路由器的当前状态。重定向之前,路由器将通过运行保护(CanActivate)来检查是否允许新状态。...它是如何Angular 2中工作Angular 2不具有双向digest cycle,这是与Angular 1不同。...Angular2中,组件中发生任何改变总是从当前组件传播到其所有组件中。如果一个组件更改需要反映到其父组件层次结构中,我们可以通过使用事件发射器api来发出事件。...你可以每种情况下使用相同API。Observable是可取消,这相比于Promise也具有优势。...你是否也想知道自己到底掌握的如何呢?

    17.3K80

    angularjs学习第七天笔记(系统指令学习)

    您好,接着昨天对简单指令学习了解以后,今天开始学习了解angularjs中系统指令   系统指令大部分都是以ng开始,这也是为什么自定义指令命名时不要以ng开始原因所在   系统指令在学习了分成两个部分进行学习...:基础指令、指令中使用作用域   第一、基础指令     基础指令由包括bool型和类bool型两类     bool型指令,就是其是一bool(true or false)     1.1、bool...控制下拉框选中项  1.2、类布尔指令包括:     ng-href 指令:与html中href对应,其好处是当为给其赋值时     ng-src指令:与html中src对应,表达式生效之前不要加载图像...        指令中使用作用域,其简单理解就是,其指令会创建一个隔离作用域,基础父作用域。       ...是偶数时值为true     $odd:当$index是奇数时值为true     ng-repeat在数据列表显示中用比较多,实际使用中可以根据其关键字进行样式设置展示     特别说明:集合数据开始坐标是

    2.9K10

    angularjs学习第七天笔记(系统指令学习)

    您好,接着昨天对简单指令学习了解以后,今天开始学习了解angularjs中系统指令   系统指令大部分都是以ng开始,这也是为什么自定义指令命名时不要以ng开始原因所在   系统指令在学习了分成两个部分进行学习...:基础指令、指令中使用作用域   第一、基础指令     基础指令由包括bool型和类bool型两类     bool型指令,就是其是一bool(true or false)     1.1、bool...控制下拉框选中项  1.2、类布尔指令包括:     ng-href 指令:与html中href对应,其好处是当为给其赋值时     ng-src指令:与html中src对应,表达式生效之前不要加载图像...        指令中使用作用域,其简单理解就是,其指令会创建一个隔离作用域,基础父作用域。       ...:当$index是偶数时值为true     $odd:当$index是奇数时值为true     ng-repeat在数据列表显示中用比较多,实际使用中可以根据其关键字进行样式设置展示

    2.6K30
    领券