当前位置: 首页 > 知识库问答 >
问题:

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

华永逸
2023-03-14

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

Angular以前的版本有< code>NgAttr和我认为< code>NgChecked,它们似乎都提供了我所追求的功能。然而,这些属性在Angular 2中似乎并不存在,我也看不出有其他方法可以提供这种功能。

共有3个答案

庞彬
2023-03-14

Refining Günter Zöchbauer 回答:

现在看来,情况有所不同。我试图这样做,以有条件地将href属性应用于锚点标签。您必须对“不适用”情况使用未定义。例如,我将使用有条件地应用 href 属性的链接进行演示。

--编辑——看起来angular已经改变了一些东西,因此<code>null</code>现在将按预期工作。我更新了示例,使用<code>null</code>而不是<code>undefined</code>。

锚标记没有href属性变得pl

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

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

这比使用两个* ngIf干净的跨越了

张博涛
2023-03-14

在angular-2属性语法中是

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

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

所以可以用like

[attr.role]="myAriaRole ? true: null"
端木高邈
2023-03-14

<代码>零代码> < /删除:

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

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

如果添加此绑定的 HTML 元素没有具有绑定中使用的名称的属性(在本例中已选中),并且没有将 Angular 组件或指令应用于选中了 @Input() 的同一元素;,则不能使用 [xxx]=“...”

另请参见HTML中的属性和属性之间的区别?

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

因为<代码>

另一个常见的陷阱是,对于[attr.xxx]=“…”绑定,值()总是字符串化。只有属性和<code>Input()

大多数属性的元素和属性都反对

绑定到特性时,该属性也仅从该特性接收字符串化值。
绑定到属性时,属性接收绑定到它的值(布尔值、数字、对象等),并再次接收属性的字符串化值。

两种情况下,属性和属性名不

>

  • 在angular 2.0模板中将“for”属性添加到标签时出错。
  • 这是一个很好的例子https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor(请参见说明的第一句:<code>htmlFor属性反映了</code>的值-<code>for</code>可能不起作用,因为它是C或JavaScript中的关键字。)

    为什么colspan不是一个已知的和本地属性

    角改变了之后,知道了

  •  类似资料:
    • 问题内容: 如何有条件地添加一个元素属性,例如复选框的? 我认为以前的Angular版本具有并且似乎都提供了我所追求的功能。但是,这些属性在Angular 2中似乎不存在,我看不到提供此功能的其他方法。 问题答案: 删除它: 要么 暗示: 属性与属性 当您在其中添加此绑定的HTML元素不具有该绑定中使用的名称的属性(在这种情况下),并且也没有将Angular组件或指令应用于具有的同一元素时,则无法

    • 问题内容: 假设我有以下代码: 该语句在计算中是否有效(我认为不是)?如果没有,如何在TensorFlow计算图中添加一条语句? 问题答案: 您是正确的,该语句在这里不起作用,因为该条件是在图构造时评估的,而大概您希望该条件取决于运行时馈入占位符的值。(实际上,它将始终采用第一个分支,因为`condition 0Tensor`,这在Python中是“真实的”。) 为了支持条件控制流,TensorF

    • 我如何添加一些自定义属性? 到目前为止,我使用了以下语法 ...但是它不能读取文件,因为它不能识别“changetype”属性。 如何添加该属性?

    • 问题内容: 如果满足特定条件,是否有办法仅向React组件添加属性? 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中,但是由于readOnly =“ false”与完全省略该属性不同,因此我看不到如何解决此问题。 下面的示例应解释我想要的内容,但将无法正常工作(解析错误:意外的标识符)。 问题答案: 显然,对于某些属性,如果您传递给它的值不真实,React足

    • 问题内容: 如果响应包含“已完成”或“正在处理,将需要一些时间来处理”,我希望在两种情况下都可以通过请求。 但是,如果我将这两个断言都包含在响应断言中,它将视为“和”。只有双方都满意,它才会通过。在这里,任何一项就足够了。请提出建议。 问题答案: 您将需要一个支持脚本的断言,即Beanshell断言 将Beanshell断言添加为请求的子项,该请求将返回“已完成”或“正在进行”消息 将以下代码放入

    • 我想有条件地向对象添加一个属性。目前我有这个: 问题是如果汽车。电池不存在我有电池:未定义。如果对象中不存在该属性,我宁愿不要该属性。我怎样才能做到这一点?