在Angular2中将属性与[attr.attributeName]和[attributeName]绑定之间的区别 [英] Difference between binding the attributes with [attr.attributeName] and [attributeName] in Angular2

问题描述

我是Angular2的新手.当IAM绑定属性时，我通常采用以下方式.

I am new to Angular2. When iam binding attributes i used to do it in following way.

示例1:

  <input type="number" [max]="variableName">

示例2:

<select [(ngModel)]="selectedItem">
  <option *ngFor="let item of itemList" [value]="item.value" [selected]="selectedItem==item.value">{{item.name}}</option>
</select>

有时这些绑定曾经失败.

Some times these bindings used to fail .

然后，我使用以下语法通过在属性后缀attr来绑定属性.为此.

Then i used the following syntax to bind attribute by suffixing attr. for it.

示例1:

<input type="number" [attr.max]="variableName">

示例2:

 <select [(ngModel)]="selectedItem">
      <option *ngFor="let item of itemList" [value]="item.value" [attr.selected]="selectedItem==item.value">{{item.name}}</option>
    </select>

这些语法有时会像魅力一样工作.

These syntax used to work like charm some times.

请帮助我学习这两个绑定[attributename]和[attr.attributeName]之间的区别，并且在使用这些特定语法时非常重要.

Please help me in learning the difference between these two bindings [attributename] and [attr.attributeName] with there importance in using those particular syntax.

推荐答案

这是属性绑定

[selected]="selectedItem==item.value"

这是属性绑定

[attr.selected]="selectedItem==item.value"

另请参见属性与属性有什么区别?区分属性和属性.

See also What is the difference between attribute and property? for the difference between property and attribute.

仅当元素实际上具有具有该名称的属性时，属性绑定才起作​​用.一些属性会自动反映到属性中.

Property binding works only if the element actually has a property with that name. Some property are automatically reflected to attributes.

Attribute只是将具有该名称的属性添加到DOM元素.已知属性由元素(和Angular组件的@Input())读取. 自定义属性只会添加到DOM中，而不会由元素进行处理.

Attribute just adds an attribute with that name to the DOM element. Known attributes are read by elements (and @Input()s of Angular components). Custom attributes are just added to the DOM and not processed by the element.

这篇关于在Angular2中将属性与[attr.attributeName]和[attributeName]绑定之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！