angular4中template语法

<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'">

猜你喜欢

转载自blog.csdn.net/yangxiaoyanger/article/details/80349685