angular4中template语法

最新推荐文章于 2024-11-27 02:21:09 发布

原创最新推荐文章于 2024-11-27 02:21:09 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

angualr 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了Angular中表格数据绑定的实现方式，包括属性绑定、事件绑定及双向数据绑定等核心概念。通过具体实例展示了如何利用这些绑定技术来操作DOM元素，实现数据展示和交互功能。

<table id="example" class="am-table am-table-bordered am-table-striped am-table-hover">
                            <thead>
                            <tr>
                                <th  *ngFor="let colum of colums"  >{{colum.colName}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let parkIn of parkIns" (click)="getDetailAndFind(parkIn[carid])">
                            <td *ngFor="let colum of colums" 
                            width="{{colum.width}}"  [innerHTML]="colum.formatter ? colum.formatter(parkIn[colum.colValue]):parkIn[colum.colValue] "></td>
                            </tr>
                        </tbody>
                    </table>

Binding targets

The target of a data binding is something in the DOM. Depending on the binding type, the target can be an (element | component | directive) property, an (element | component | directive) event, or (rarely) an attribute name. The following table summarizes:

Type	Target	Examples
Property	Element property Component property Directive property	src/app/app.component.html content_copy`<img [src]="heroImageUrl"> <app-hero-detail [hero]="currentHero"></app-hero-detail> <div [ngClass]="{'special': isSpecial}"></div>`
Event	Element event Component event Directive event	src/app/app.component.html content_copy`<button (click)="onSave()">Save</button> <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail> <div (myClick)="clicked=$event" clickable>click me</div>`
Two-way	Event and property	src/app/app.component.html content_copy`<input [(ngModel)]="name">`
Attribute	Attribute (the exception)	src/app/app.component.html content_copy`<button [attr.aria-label]="help">help</button>`
Class	`class` property	src/app/app.component.html content_copy`<div [class.special]="isSpecial">Special</div>`
Style	`style` property	src/app/app.component.html content_copy`<button [style.color]="isSpecial ? 'red' : 'green'">`