DOM属性绑定

为DOM元素绑定属性（ Property）

使用 [ property ]=' 表达式 '为元素绑定 DOM 对象属性。下面的例子表示将itemIMageUrl这个变量的动态值赋值给了img标签的src属性。

xxxxxxxxxx
<!-- itemImageUrl来自组件类实例-->
<img [src]="itemImageUrl">

xxxxxxxxxx
//app.component.ts
export class AppComponent {
  itemImageUrl = 'https://www.baidu.com/img/flexible/logo/pc/result.png';
}

如果属性名没有加方括号[ ]，则表示等号右面的值就是一个字符串，而不是一个动态的表达式。

xxxxxxxxxx
<!-- 这里的itemImageUrl只是一个字符串"itemImageUrl"-->
<img src="itemImageUrl">

区分DOM对象属性（Property）跟HTML标记属性（Attribute）

xxxxxxxxxx
<table [border]="1">
    <tr>
        <!-- 这种写法会报错，因为colspan并不是td这个DOM对象的一个属性,它是td的html标记属性 -->
        <td [colspan]='1+1'>1</td>
        <td>3</td>
    </tr>
    <tr>
        <td >1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

我们打印出一个td的DOM对象可以看到，它对应的DOM属性是colSpan。

所以正确的写法应该是：

xxxxxxxxxx
<table [border]="1">
    <tr>
        <!-- 这里的方括号可以给DOM对象的属性（property）去添加 -->
        <td [colSpan]='1+1'>1</td>
        <td>3</td>
    </tr>
    <tr>
        <td >1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

或者

xxxxxxxxxx
<table [border]="1">
    <tr>
        <!-- 使用attr.[Attribute名称]='表达式' -->
        <td [attr.colspan]='1+1'>1</td>
        <td>3</td>
    </tr>
    <tr>
        <td >1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

插值与属性绑定

xxxxxxxxxx
 <!-- 相同的输出 -->
<td [colSpan]='1+1'>1</td>
<td colSpan='{{1+1}}'>1</td>

<!-- 相同的输出 -->
<img [src]="itemImageUrl">
<img src="{{itemImageUrl}}">

实时效果反馈

1.下列描述正确的是：

A 使用方括号可以将组件实例的值绑定到DOM对象的属性

B 不使用方括号，等号可以使用表达式

C <img [src]="itemImageUrl">与<img src="itemImageUrl">效果一样

D <td [colSpan]='1+1'>1</td>与<td colspan='{{1+1}}'>1</td>效果一样

答案

1=>A