如何在Angular 2中添加条件属性?

2020/10/06 23:41 · javascript ·  · 0评论

如何有条件地添加元素属性,例如checked复选框的?

NgAttr我认为Angular的早期版本已经提供,而我认为NgChecked所有这些似乎都提供了我所追求的功能。但是,这些属性在Angular 2中似乎并不存在,并且我看不到提供此功能的其他方法。

null 删除它:

[attr.checked]="value ? '' : null"

要么

[attr.checked]="value ? 'checked' : null"

暗示:

属性与属性

如果在其中添加此绑定的HTML元素不具有该绑定中使用的名称的属性(checked在这种情况下),并且也没有将Angular组件或指令应用于具有的同一元素@Input() checked;,则[xxx]="..."无法使用。

另请参见HTML中的属性和属性有什么区别?

没有此类属性时要绑定的内容

替代方案是[style.xxx]="..."[attr.xxx]="..."[class.xxx]="..."这取决于你试图完成什么。

因为<input>仅具有checked属性,但没有checked属性[attr.checked]="..."是此特定情况的正确方法。

属性只能处理字符串值

常见的陷阱还在于,对于[attr.xxx]="..."绑定,值(...始终字符串化的。仅属性和@Input()s可以接收其他值类型,例如布尔值,数字,对象,...

元素的大多数属性和属性是连接的,并且具有相同的名称。

属性-属性连接

当绑定到属性时,该属性也仅从该属性接收字符串化的值。

当绑定到该属性时,该属性将接收与其绑定的值(布尔值,数字,对象等),而该属性又是字符串化的值。

属性和属性名称不匹配的两种情况。

从那时起Angular就进行了更改,并且知道了这些特殊情况并对其进行了处理,<label [for]="即使没有这样的属性,您也可以绑定到(与相同colspan

在angular-2属性语法中,是

<div [attr.role]="myAriaRole">

将属性角色绑定到表达式myAriaRole的结果。

所以可以用像

[attr.role]="myAriaRole ? true: null"

提炼GünterZöchbauer的答案:

现在似乎有所不同。我试图这样做,以便有条件地将href属性应用于锚标记。对于“不适用”情况,必须使用undefined。作为示例,我将通过有条件地应用href属性的链接进行演示。

-编辑-似乎角度更改了某些事情,因此null现在可以按预期工作。我将示例更新为null而不是undefined

根据超链接规范,没有href属性的锚标记变为纯文本,表示链接的占位符

对于我的导航,我有一个链接列表,但是其中一个链接代表当前页面。我不希望当前页面链接成为链接,但仍然希望它出现在列表中(它具有一些自定义样式,但是此示例已简化)。

<a [attr.href]="currentUrl !== link.url ? link.url : null">

我认为这比在span和anchor标签上使用两个* ngIf更干净。对于将禁用属性添加到按钮,它也是理想的选择。

如果是输入元素,则可以编写如下内容:...
<input type="radio" [checked]="condition">condition的值必须为true或false。

也用于样式属性...
<h4 [style.color]="'red'">Some text</h4>

你可以用这个

<span [attr.checked]="val? true : false"> </span>

对于为现有的scss编写HTML的人,可以使用更好的方法。

html

[attr.role]="<boolean>"

脚本

[role = "true"] { ... }

这样,您就不必<boolean> ? true : null每次都这样。

在此,仅打印“ isValid”为真/包含任何值的段落

<p *ngIf="isValid ? true : false">Paragraph</p>

我想有提示只有在代码中添加下面的某一特定领域,但你想有提示上multiplent你可以使用一个数组valdidate:

具有自定义data-tooltip属性的多个Elements

1:[ ''key1ToHaveTooltip',`key2ToHaveTooltip']。includes(key)

2:['key1ToHaveTooltip','key2ToHaveTooltip']。indexOf(key)> -1

在超过1个元素上具有工具提示属性。

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

内联地图也很方便。

它们也更加明确和可读。

[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"

如果您不喜欢三元语法或ngIfs(等),则这是完成同一件事的另一种方法

本文地址:http://javascript.askforanswer.com/ruhezaiangular-2zhongtianjiatiaojianshuxing.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!