应用默认样式和 onClick 更改按钮的样式 -Angular 4

2024-03-09

我有一个按钮,我想应用按钮的默认样式,当用户单击按钮时,将按钮样式颜色更改为红色,将背景颜色更改为白色。 Blow 是我的 .css 和组件。

.btn-default {
  color: white;
  background-color: blue;

}

.btn-change {
  color: Red;
  background-color: white;
}

组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  bntStyle: string;
  AppComponent() {

   this. bntStyle = 'btn-default';
  }
  submit() {
    this.bntStyle = 'btn-change';

  }

.html

<div>
 <button name="Save" [ngClass]="['bntStyle']" (onClick)="submit()">Submit</button>
</div>

您正在绑定强“按钮样式”。相反,您应该绑定该字段:

<div>
    <button name="Save" [ngClass]="[bntStyle]" (click)="submit()">Submit</button>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

应用默认样式和 onClick 更改按钮的样式 -Angular 4 的相关文章

  • 与 body 相比,将 css 规则应用于 html 有什么区别?

    我看不出以下之间的区别 html background f1f1f1 and body background f1f1f1 有什么解释吗 没有真正的区别 如果你只是谈论在哪里申请background 否则BoltClock 对另一个问题的回
  • 角度订阅响应

    好吧 我对 Angular 还很陌生 所以我遇到了这个小问题 所以我遵循 Angular 指南 https angular io guide http https angular io guide http 所以我的问题是我的 http r
  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 如何在 RxJS 订阅方法中等待

    在 RxJS 主题的订阅回调内部 我想要await on an async功能 下面是打字稿转译器抱怨的代码示例 错误 131 21 TS2304 找不到名称 await async ngOnInit this subscriber dat
  • ngrx 存储是否持久?

    ngrx 存储是否持久 换句话说 我们可以关闭浏览器重新打开它 并检索添加到ngrx 商店 https github com ngrx platform 目前 ngrx store 不支持此类功能 但是您可以通过使用类似的库来维护状态ngr
  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • 如何在我的 html 中使用 Flaticon 中的图标?

    我想给我的网站一些图标 现在我看到很多人使用Flaticon这个网站 我所做的就是在 CSS 中添加这样的内容 Font 1 font face font family Flaticon1 src url flaticon1 eot src
  • 如何用纯JavaScript控制变换距离

    我做的http codepen io adamchenwei pen dOvJNX http codepen io adamchenwei pen dOvJNX 我尝试对 dom 应用某种移动方式 使其移动固定距离并停止 而不是动画并移动穿
  • 背景颜色的不透明度,但不是文本的不透明度[重复]

    这个问题在这里已经有答案了 如何使背景的跨浏览器 包括 Internet Explorer 6 透明div而文本仍然不透明 我需要在不使用任何库 例如 jQuery 等 的情况下完成此操作 但如果您知道有一个库可以实现此目的 我很想知道 这
  • 混合混合模式:乘法在 Chrome 中不起作用

    我正在尝试使用mix blend mode multiply在 Chrome 上 但它无法按预期工作 当我添加时magenta cyan and yellow在一起它不会给我黑色但brown https i stack imgur com
  • 如何使用 *ngFor 迭代对象键

    我想在 Angular 2 中使用 ngFor 迭代 object object 问题是该对象不是对象的数组 而是包含更多对象的对象的对象 data id 834 first name GS last name Shahid phone 0
  • 垂直对齐两个弹性项目[重复]

    这个问题在这里已经有答案了 我有一个弹性容器 container和两个弹性项目 item one and item two 我想将第一个项目垂直居中并将第二个项目粘在底部 我不知道如何在这种情况下垂直对齐第一项 HTML div class
  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • Swift - 将图像插入 PDF 不再适用于 iOS 13

    目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能 我有一个预览屏幕 可以在您保存 PDF 之前显示它 预览屏幕由带有 html 的 webView 组成 其中包含占位符 我能够成功地将图像插入到正确的占位符上 并将其显示在 PDF
  • 修剪日期格式 PrimeNG 日历 - 删除时间戳、角度反应形式

    我将以下内容推入我的反应形式 obj 中2016 01 01T00 00 00 000Z但我想要以下2016 01 01 有谁知道有一个内置函数可以实现上述目的 我已经搜索过文档here https www primefaces org p
  • iOS 键盘显示后分屏宽度

    我刚刚开始研究 Cordova 应用程序对分屏多任务处理的支持 到目前为止 该应用程序在模拟器中的 iPad 上显示和调整大小都很好 但是当我单击编辑字段并显示软件键盘时 100 宽度的值开始返回整个屏幕 而不是给出的窗口 初始显示 到目前
  • 在 R Shiny 中,如何使用可排序 js 将其在列表中出现的顺序次数附加到每个列表元素?

    下面的可重现代码适用于将元素从一个面板拖动到另一个面板 并在 拖动到 面板中自动使用 HTML CSS 对拖入的每个元素进行排名顺序编号 但是 我现在尝试附加到每个 拖动到 列表元素的末尾 使用某种形式的paste0 我假设 该元素在 拖至
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 如何显示 GroupList 的 FormArray?

    我正在尝试制作一个交互式表单 在每一行上列出一个项目以及一个删除按钮 在我的示例中称为 verwijderen 这些项目是从数据库中检索的 并且每个项目都实例化为名为的自定义对象LaborPeriod 然后这些对象被转化为FormGroup
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS

随机推荐

  • Prolog 中的条件编写

    I have Prolog包含飞机时刻表的数据库 它看起来是这样的 fly id from to days 1 0 1 0 1 0 1 正如你所看到的 有 7 个值days谓词 从星期一到星期日 我想做的是每天打印 价值所在1 但将其打印为
  • Win32:Watson 博士的完整/迷你转储和我自己编写的转储之间有区别吗?

    我有一个应用程序在发布版本中偶尔会崩溃 不幸的是 看起来它在第 3 方 DLL 中崩溃了 在试图掌握它的过程中 我一直在如何操作和 Windows 如何创建故障转储的描述的海洋中游泳 我正在考虑使用这个建议的小型转储 获取启动时崩溃的进程的
  • 具有相同擦除的两种方法不需要覆盖等效(或者它们的签名不是它们之间的子签名)?

    我正在阅读关于 jdk6 的令人难以置信的书 java scjp 认证程序员指南 其中有一个关于泛型覆盖的部分 它描述了子签名和覆盖等效项 并描述了我引用的一些覆盖等效项的示例 给定类中的以下三个泛型方法声明 static
  • 无法保存 applicationHost.config 文件

    我无法保存 applicationHost config 文件 当我停止 IIS 服务并关闭 Visual Studio 时 它显示 保存失败 它在另一个程序中打开 知道吗 如果您使用 64 位架构并尝试使用 32 位编辑器 例如 Note
  • 将背景图像添加到各个片段

    我有一个应用程序有多个fragments我想知道如何添加每个不同的背景fragment 我使用的布局有可滚动选项卡 它们都使用相同的 xml 文件 我也有一个MainActivity设置视图和adapter对于每个fragment 我知道你
  • 将 ActiveRecord 验证错误转换为 API 可使用错误

    我正在 Rails 4 中编写一个非常标准的 CRUD RESTful API 不过 我在错误处理方面有所欠缺 假设我有以下模型 class Book lt ActiveRecord Base validates title presenc
  • 将 Kinect ColorImageFrame 转换为位图

    我将 Kinect Microsoft SDK 与 XNA 结合使用 我想使用 GRATF 进行标记识别 如何转换 Kinect 的数据ColorImageFrame to a System Drawing Bitmap or AForge
  • 使用 python (win32com.client) 将图像插入到 powerpoint 幻灯片中

    我的任务是在幻灯片中插入数百张图像并调整其大小 我需要使用与我们公司使用的其他幻灯片类似的特定源格式 我一直在使用活跃的 python win32com API 并且已经弄清楚如何打开文件并创建空白幻灯片 我的问题是我将如何插入图像并将其大
  • Fancybox 包装器无法根据图像尺寸正确自动调整大小

    我在使用 FancyBox 时遇到问题 它应该根据图像的尺寸自动调整包装器的大小 它不是这样做的 具体来说就是太小了 这是我使用的 FancyBox jQuery 代码 a rel photo gallery fancybox type i
  • 在QGraphicsView的ScrollHandDrag模式下,如何停止场景中QGraphicsItems的移动?

    我有多个QGraphicsItem场景中的内容分布在场景的不同部分 在应用程序中 有不同的模式 其中一种模式用户可以滚动场景 手掌拖动模式 为了实现场景I的滚动set dragMode of QGraphicsView to ScrollH
  • 无法识别已安装的项目特定的 nuget 包

    我有一个 Web 项目 由于 nuget 错误而无法构建 我们有许多网站都使用名为 Sitecore 的网络 CMS 我们不同的网站在不同的版本下运行 因此 我们有一个针对多个版本的通用库如此处所述 https stackoverflow
  • 本地图像在 React-Native 应用程序发布版本中不可见

    在我的反应本机应用程序中我有 src http postimg org image ak6w7cbk3 文件夹 其中包括Images文件夹和屏幕文件夹 Myscreens文件夹有各种成分我在哪里使用本地图像Images使用以下代码
  • 如何使用表单身份验证将用户重定向到密码恢复页面

    我是 asp net 的初学者 我目前有一个登录页面 屏幕底部有一个忘记密码链接按钮 我还使用表单身份验证来防止未经授权的用户访问其他页面 除了一件事之外 身份验证似乎工作正常 一旦用户单击链接按钮 它就会阻止用户访问密码恢复页面 如何允许
  • 可变数量的参数而不装箱值类型?

    public void DoSomething params object args 上述签名的问题在于 传递给该方法的每个值类型都将被隐式装箱 这对我来说是严重的性能问题 有没有办法声明一个接受可变数量参数而不装箱值类型的方法 Thank
  • jQuery 中的输入与 :Input

    我想知道为什么人们似乎更喜欢 input over input作为 jQuery 选择器 基本上 这两行似乎做了同样的事情 input first focus input first focus 但第二个版本使用更广泛 我不明白为什么 此外
  • 第三方脚本可以设置第一方 cookie 吗?

    我在网上阅读了很多有关 cookie 的内容 但没有解决这个问题 假设我在 a com 上有一台服务器 而 b com 提供的网页在我的服务器上的该网页中嵌入了一个脚本 该脚本在设置 cookie 方面可以做什么 它可以设置一个cookie
  • 需要特殊数组(线性场)的算法

    我有一个数组 线性场 与预先排序的数字 1 2 3 4 5 6 但这些数组向右移动 k次 now its 5 6 1 2 3 4 k 2 但我不知道k 只有数组A 现在我需要一个算法来找到 A 中的最大值 运行时间 O logn 我认为它是
  • Vue.js 单向绑定表单

    我是 Vue js 的新手 我正在尝试测试这个框架的一些功能 现在我正在测试输入表单 我想进行单向绑定 而不使用v model指令 但我找不到任何示例 有人可以帮助我吗 这是单向和双向绑定的示例 var V new Vue el vue i
  • 如何创建弹出菜单

    我是 javafx 的新手 我想在单击鼠标右键时显示 弹出菜单 我找到一个教程Here http pixelduke wordpress com 2011 12 11 popupmenu in javafx and Here http la
  • 应用默认样式和 onClick 更改按钮的样式 -Angular 4

    我有一个按钮 我想应用按钮的默认样式 当用户单击按钮时 将按钮样式颜色更改为红色 将背景颜色更改为白色 Blow 是我的 css 和组件 btn default color white background color blue btn c