Angular4将多个属性应用于html元素单个条件
Angular4是一种流行的前端开发框架，它可以将多个属性应用于HTML元素的单个条件。具体来说，Angular4提供了一种称为属性绑定的机制，通过它可以将组件中的属性值绑定到HTML元素的属性上。
在Angular4中，可以使用方括号语法将组件属性绑定到HTML元素的属性上。例如，假设有一个名为"isActive"的组件属性，可以将其绑定到一个按钮的disabled属性上，代码如下：
<button [disabled]="isActive">Click me</button>在上述代码中，当"isActive"属性的值为true时，按钮将被禁用(disabled)；当"isActive"属性的值为false时，按钮将可用。
除了单个属性的绑定，Angular4还支持将多个属性应用于HTML元素的单个条件。这可以通过使用ngClass指令来实现。ngClass指令允许根据条件动态地添加或移除CSS类。
下面是一个示例，展示了如何根据多个条件应用不同的CSS类：
<div [ngClass]="{ 'highlight': isActive, 'bold': isImportant }">Hello, Angular4!</div>在上述代码中，根据"isActive"和"isImportant"属性的值，div元素将应用不同的CSS类。如果"isActive"属性的值为true，则div元素将应用名为"highlight"的CSS类；如果"isImportant"属性的值为true，则div元素将应用名为"bold"的CSS类。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile
相关·内容
我正在尝试使用AWS Config Advanced Query根据我创建的特定规则生成报告。
SELECT
configuration.targetResourceId,
configuration.targetResourceType,
configuration.complianceType,
configuration.configRuleList
WHERE
configuration.configRuleList.configRuleName = 'aws_config-requiredtags-rule'
AND configuration
浏览 0提问于2020-09-22得票数 3
我一直在寻找这个问题的答案，但我运气不佳。下面是我将解释的HTML：
<div class="news-overflow-hidden">
<h3>
<i class="pholder"></i>
<a href="/news/view/141524/" style="">ЕСПЧ присудил €15 000 экс-главе службы безопасности ЮКОСа</a> </h3>
浏览 0提问于2017-06-06得票数 2
2回答
所以，我以为我知道基本的CSS，但我的大脑现在很扭曲。我想在我的网站上实现960网格系统，但在此之前，我想要完全理解代码的原理。
我有两个问题。首先，css控制列的宽度。左侧是父类".container“，右侧是两个类，其中"column”类是“1”和" two“类的后代选择器。这是不是说，如果类"column“包含在"one”和"container“中，那么它的宽度是40px？简单地说:我真的不明白这三个元素之间的关系。
.container .one.column { width: 40px; }
.container .
浏览 0提问于2012-10-29得票数 2
回答已采纳
1回答
我正在学习Vue.js，作为练习，我正在开发一个SPA。我通过组件递归地添加一些图标作为imgs。(为了关注这个问题，省略了很多代码)
Vue.js
Vue.component('icon', {
template:
'<img id="logo-icon" v-on:mouseover="animation"
class="platform_button" width="50" height="50"
src="../assets/img
浏览 1提问于2017-06-08得票数 3
回答已采纳
每当我看到HTML教程时，我都会问这个原因--当一个元素只有一个的时候，我总是看到这个人为元素使用一个类。使用id不是更容易吗，还是使用类更好呢？
浏览 1提问于2017-11-05得票数 1
回答已采纳
2回答
我是一个新的ASP.NET Webforms开发人员。我现在正在学习如何使用实体框架和存储库模式。我现在所面临的困难是如何从TRequest表中检索请求列表，其中包含每个请求的批准状态。以下是我的数据库模式：
TRequest: Id, Title, Reason
TApproval: Id, RequestId, StatusId
TStatus: Id, Title
我要做的是检索请求列表，包括每个请求的状态。
在我的存储库模式中，我有以下代码：
public IEnumerable<TRequest> GetRequest()
{
return context.TRe
浏览 1提问于2016-04-17得票数 0
我的要求是，当表体正在滚动时，我希望在某些滚动后将表头固定为向上。
我的app.html在下面。
<table class="table table-fixed-ok" #scroller [class.fixed]="fixed">
<thead >
<tr class="row-hor-heading">
<th colspan="3
浏览 0提问于2017-11-07得票数 0
我需要能够从一个集合中获得所有文档，其中任何一个注释id都位于docs的子数组中。
这是一个模式：
var postSchema = mongoose.Schema({
user_id : String,
users_full_name : String,
username : String,
start_time : String,
post : String,
comments : [{
user_id
浏览 3提问于2015-07-25得票数 1
回答已采纳
1回答
我最近遇到了一个问题：
当前接受的答案似乎表明，$('element').is(':hidden')比$('element:hidden')更可取，因为:hidden过滤器只应用于单个元素。
但是..。在调用另一个函数时，调用.is()也会增加额外的开销。
这让我想到，如果选择器是一组元素，那么使用.is()的上述推理是否成立？
那么更极端的案例呢？以下列测试用例为例：
$('element.class1:not(.class2):visible[rel="foo"]')
最好把这些留在选择器里吗？或者将它们全部移
浏览 3提问于2017-09-11得票数 0
回答已采纳
1回答
在一个panel-body div中有多个panel可以吗？或者会有什么副作用。
例如：
<div class="panel panel-default special-style-border">
<div class="panel-heading">
<div class="panel-title">Heading 1</div>
</div>
<div class="panel-body">
Body
浏览 0提问于2017-10-16得票数 0
回答已采纳
5回答
可能重复：
有可能是多重身份吗？我能这样用吗？
$("#example" + " #example2")
Html
<section id="example example2"></section>
浏览 9提问于2012-10-05得票数 0
回答已采纳
2回答
HTML/CSS嵌套混淆
、、、
我知道这个问题可能已经被问过了，而且它也是一种一般性的问题，所以我希望我不会被抨击。
我有一个关于HTML/CSS和嵌套的一般性问题。我一直在努力阅读它是如何工作的，但我还没有找到任何网站，使我清楚。所以我希望这里有人能帮忙。
我正在努力理解CSS嵌套是如何工作的。
让我说，我有以下CSS：
.parent {
background-color: red;
}
.child {
background-color: green;
}
.grandchild {
background-color: blue;
}
我使用以下HTML：
<div class="
浏览 0提问于2014-08-19得票数 2
回答已采纳
我在HTML中有一个select元素，它有一个角形js的ng重复属性来呈现可用的选项，如下面的代码片段所示-
<select id="mySelect" ng-model="dummyModel" ng-init="dummyModel=0"
ng-disabled="false" style="width:200px;">
<option valu
浏览 2提问于2015-12-17得票数 2
1回答
自适应简单滑翔器
、、、
我正在使用这个非常基本的滑块，它的工作原理是应该的--但是当一个页面上有多个滑块时，当一个左右键被点击时，它们都会同时滑动。
我怎样才能让这些东西对自己来说是独一无二的呢？
感谢给予的任何帮助
谢谢
工作示例可在此处找到-> <-
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $(&#
浏览 2提问于2016-05-10得票数 0
回答已采纳
例如，我可以通过以下两种方法获得相同的结果。
<html>
<head>
<style type="text/css">
p#red{color:red} /* This is a CSS id selector*/
p.green{color:green} /* This is a CSS class selector*/
</style>
</head>
<body>
<p id="red">red color</p>
<p cla
浏览 3提问于2014-03-21得票数 0
回答已采纳
3回答
在这段代码中，我有一个类似下面这样的段落
<p class="special">
This is just a test. <em>what color here</em> inheritance work
</p>
我想知道为什么字符串"what color here“不从父p元素获取颜色。我的意思是，特殊类的特异值是10，而像em这样的类型的特异值是1，所以这里10大于1。
所以我的意思是颜色应该取自选择器.special
这是标记和css
<!DOCTYPE html>
<html>
浏览 0提问于2013-09-05得票数 2
1回答
假设我收集了如下文件：
{
title: "test1",
items:
[
{id: 1, sub_id: 23, value:"some value"},
{id: 2, value:"some value"}
]
},
{
title: "test2",
items:
[
{id: 4, sub_id: 34, value:"blah"},
{id: 5, sub_id: 56, valu
浏览 1提问于2014-10-09得票数 0
回答已采纳
1回答
如果有可能在ng-show中包含class，我正在尝试，但我无法使它工作。所以我的问题是，这有可能吗？
示例HTML代码
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
我想要什么输出，如果可能的话，
<span ng-show="{'class' : glyphicon glyphicon-remove form-control-feedback}"></span>
浏览 3提问于2017-03-22得票数 0
回答已采纳
我正在实践工作中与angular4合作，这对我来说是新的。
为了获得HTML元素及其值，我使用了<HTMLInputElement> document.getElementById或<HTMLSelectElement> document.getElementById。
我想知道是否有任何角度上的替代。
浏览 4提问于2018-01-12得票数 138
回答已采纳
2回答
我正在阅读mongodb 的文档，我无法理解这两个命令以及它们之间的区别。
db.users.find( { finished: { $elemMatch: { $gt: 15, $lt: 20 } } } )
我的理解是:至少有一个元素需要同时满足这两个条件。
和
元素的组合满足条件 ...one元素可以满足大于15的条件，另一个元素可以满足小于20的条件，或者单个元素可以同时满足两者的条件。
db.users.find( { finished: { $gt: 15, $lt: 20 } } )
问题:数组上的范围匹配如何发生？是否就像如果一个元素满足$gt:15，这个条件就用完了，
浏览 11提问于2016-06-05得票数 5
回答已采纳
我是knockoutjs的新手，正在尝试学习它，并阅读来自许多不同网站的代码样本。我得到了一段使用knockoutjs进行表数据绑定的代码，但我不能正确理解绑定代码。因此，我将在这里发布代码。所以，如果可能的话，有人可以帮我理解代码。
下面是完整的代码
<script type="text/html" id="person">
<tr>
<td data-bind="text: $root.name"></td>
<td data-bind="text: $pare
浏览 2提问于2015-05-18得票数 0
当我键入LINQ查询时，Visual 2010中的intellisense显示where子句需要<条件>。如图所示
From anItem in listOfItems where ... Intellisense shows it expects a < condition >
这个<条件>指的是什么？是一种类型吗？谓词？布尔表达式？例如，如果你键入..。
listOfItems.RemoveAll(
...intellisense显示它期待一个。在linq中< condition >的模拟是什么？(我知道如何使用a where条件，我想知道它
浏览 4提问于2011-12-28得票数 1
回答已采纳
因此，我编写了一个HTML页面，当单击某个名称时，该名称会淡出。代码如下所示
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#names").click(function(){
$(this
浏览 33提问于2016-05-24得票数 0
有一种情况是，为了使用html:option填充下拉列表，我需要迭代一个TreeSet，如下所示：
<html:select id="schoolLevel" name="schoolLevel">
<html:option value="">ALL</html:option>
<html:options property="schoolLevel" />
</html:select>
由于当前代码的设计，我需要以TreeSet的身份执行此操作，而不是将其更
浏览 0提问于2013-05-31得票数 0
回答已采纳
根据角度文件，角指令有三种类型：
组件
构造性
属性
根据以下官方链接：
1.组件
<home></home>
<about-us></about-us>
<support></support>
2.结构指示
<div *ngIf="age < 18"> ... </div>
<div *ngFor="let x of students"> ... </div>
3.属性指令
<div [ngClass]=
浏览 0提问于2018-07-19得票数 3
回答已采纳
2回答
我对角很陌生，我有一段代码：
<nav ng-controller="navController">
<ul>
<li ng-class="{'active': location('/') || location('/homepage')}">
<a href="puppies">view puppies</a>
</li>
</ul>
</nav>
与相应的控制器
浏览 1提问于2014-08-25得票数 1
回答已采纳
1回答
我遇到了一个仅使用css显示隐藏在元素内部的div的示例
<style type="text/css">
#shopCart:hover .shopCartDetail {
display: block;
}
</style>
<div id="shopCart">
Shop Cart
<div class="shopCartDetail"><style>.shopCartDetail {display:none}</style>
This is Shop
浏览 0提问于2012-11-30得票数 0
回答已采纳
我已经开始使用java代码库，其中样式和styleClass关键字用于对jsf页面中的不同元素进行样式化。该项目正在使用jsf 2.2。
'style‘关键字用于应用html属性，如：
<h:panelGroup style="margin-top:60px">
</h:panelGroup>
其中，as 'styleClass‘关键字用于应用.css文件中的类/样式，如下所示：
<h:panelGroup layout="block" styleClass="panel panel-default"
浏览 4提问于2017-02-14得票数 9
回答已采纳
2回答
所以我使用Google，我想要一个单元格来有条件地高亮显示，而这个单元格没有两个特定的文本。
📷
因此，在我的示例中，我希望单元格B26只在不包含NYS或JFK的情况下突出显示。
这有可能吗？在谷歌页面中似乎没有内置的选项。
许多指南只教如何为现存的文本创建自定义公式。
例如，=ISNUMBER(SEARCH("JFK",B26))
我在寻找相反的效果。
浏览 0提问于2022-05-13得票数 0
回答已采纳
2回答
我对PS相当陌生:我正在从多个xml文件($ABB)中提取字段。$net变量基于模式搜索，并在第2行返回一个非静态子字符串。
$ABB = If ($aa -eq $null ) {"nothing to see here"} else {
$count = 0
$files = @($aa)
foreach ($f in $files)
{
$count += 1
$mo=(Get-Content -Path $f )[8].Substring(51,2)
(Get-Co
浏览 1提问于2020-02-05得票数 0
回答已采纳
1回答
这是我的小提琴
绘制黑色矩形，只是为了显示剪辑路径出现的位置。红色的矩形是我们需要裁剪的对象。
在将对象(红色矩形)旋转20度后，红色矩形的右下角必须与黑色边框矩形对齐，而且由于红色矩形的高度很高，所以应该看不到左下角。(想象将右侧红色矩形顺时针旋转20度，并将结果与左侧红色矩形进行比较。)
浏览 4提问于2012-02-20得票数 3
2回答
下面有一个HTML代码示例。我的目标是用XPath来解决价格问题：
<div class="product-price">
<div class="Price">
<span class="value">9,99 €</span>
</div>
</div>
.
.
.
<div class="product-price">
<div class="Price">
浏览 0提问于2018-09-23得票数 2
回答已采纳
首先，当涉及到CSS时，我是一个黑客。尽可能多地阅读和练习，以使自己变得更好。目前，我正在尝试在一行中添加一组媒体查询，以控制从移动设备开始的填充、边距和字体大小，这样我的文本就可以精确地定位在我想要的位置。我的问题是，如何为一行创建类，以便这些样式仅适用于这行内容。在这种情况下，这是我的网站上的第一行(英雄)，在图片上有html文本。下面是我试图写的，给或采取一些微调调整。如何创建单个类来控制h2和h3类的样式？
@media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!import
浏览 0提问于2017-08-23得票数 0
回答已采纳
我正在响应提交按钮，如下面表的每一行所示。单击提交按钮时，Javascript初始化并警告()响应。问题只是第一个按钮按预期工作，随后的按钮重定向到foobar.php。
提交按钮：
<form name="savefilenote" id="savefilenote" method="post" action="forbidden-savefilenote.php?notetype=2">Note: <input id="filenote" name="filenote" typ
浏览 0提问于2018-12-17得票数 0
回答已采纳
我知道这可能是一个荒谬的问题，但是使用*通用选择器和只使用html有什么不同呢？
例如：
* {
margin: 0;
padding: 0;
}
和
html {
margin: 0;
padding: 0;
}
浏览 6提问于2016-05-31得票数 7
9回答
我在codeschool.com上学习jQuery，有一个问题困扰着我。我们正在学习如何在单个jQuery条目中选择多个html元素。使用的html代码如下所示，我们应该选择亚洲类的元素和销售类的元素。
正确答案是$(".asian，.sale")
我的问题是，".sale“是如何成为类的名称的？如果你看下面的html，你会发现没有带有"class=sale“的元素，只有一个带有class = "europe sale”的元素。“为什么jQuery调用的是".sale”而不是".europe sale"？
<div id=&
浏览 0提问于2013-08-02得票数 2
我有一个简单的模式，其中我将minOccurs和maxOccurs都声明为1。当我运行XSD.exe以生成C#类并在代码中使用该类时，该字段并不强制为必填字段。是否遗漏了一些额外的步骤？或者使用XSD.exe生成的类不需要必填字段？
任何建议或见解都将是有帮助的。
浏览 3提问于2010-05-03得票数 7
2回答
这对于查找类似按钮的HTML元素非常有效(特意简化)：
//button[text()='Buy']
| //input[@type='submit' and @value='Buy']
| //a/img[@title='Buy']
现在我需要将其限制在一个上下文中。例如，出现在标签框内的购买按钮：
//legend[text()='Flubber']
这是可行的，(..将我们带到包含字段集)：
//legend[text()='Flubber']/..//button[text()=&#
浏览 0提问于2011-04-02得票数 5
回答已采纳
全
我想使用jQuery显示隐藏一些ids。我的html代码是
<table>
<tr id="incomplete"></tr>
<tr id="complete"></tr>
<tr id="incomplete"></tr>
<tr id="incomplete"></tr>
<tr id="complete"></tr>
</table>
而jquery代码是
&l
浏览 0提问于2012-03-15得票数 2
回答已采纳
是否可以将多个类分配给单个HTML容器？
类似于：
<article class="column, wrapper">
浏览 0提问于2012-01-04得票数 450
我有一个相当简单的XML结构；
<list... >
<members>
<person type="NAME_WITH_A">
<name>Ada</name>
</person>
<person type="NAME_WITH_B">
<name>Berta</name>
</person>
</member
浏览 1提问于2017-08-18得票数 1
回答已采纳
22回答
Div的类与id
、、
在使用divs时，什么时候最好使用class而不是id？
对字体变量或html中的元素使用class是最佳选择吗？然后使用id作为结构/容器？
这是我一直不太确定的事情，任何帮助都是很好的。
浏览 2提问于2008-09-17得票数 51
回答已采纳
我有一个主体复选框可以自动检查html表中的所有复选框。
我用这个代码做了：
$('.checkallsave').click( function() {
$('.savecheck').attr('checked',true);
});
现在，当主体复选框也未被选中时，我想取消选中所有复选框，我如何做到这一点？
浏览 0提问于2014-04-16得票数 0
回答已采纳
2回答
是否可以仅使用访问的伪类而不使用Javascript来更改链接中div的背景色？
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {background-color:blue;}
a:visited {background-color:green;}
.smallbox {
background-color: #666;
height: 50px;
浏览 3提问于2017-08-17得票数 2
回答已采纳
1回答
我有一个Angular4应用程序，在其中我正在使用D3生成一些图形，在我的D3代码中，我在一些元素上添加了一些类，CSS文件包含了将应用于它们的样式定义。事实上，CSS从来不会应用于这些元素。
浏览 3提问于2017-10-27得票数 1
4回答
这里的第一张海报。我一直在更新我的HTML和CSS，我遇到了一些小问题。
如果你看一下这个链接，你会发现粉红色的“我的游戏生活”和梅色的“我的宗教缺失”之间有一些不必要的间隔。这2段有一个右id，我已经将它们设置为float:right；#right {float:right;}，我对左侧的元素做了同样的操作，如下所示：
#left {float:left;}
我将在下面列出详细的代码和网站的图片：
CSS：
p {
font-size: 2em;
font-family: "Poiret One", cursive;
color: #D6EBFF;
}
浏览 3提问于2015-09-01得票数 2
回答已采纳
在春季，我们可以用属性名来定义bean。因此，我们可以使用@Named注释注入该bean。我有两个名字不同的同类型的豆子。
<bean id="MyBean1" name="first" class="org.example.MyClass">
...
</bean>
<bean id="MyBean2" name="last" class="org.example.MyClass">
...
</bean>
是否有任何方法注入一个bean
浏览 0提问于2017-05-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
