angular4中template语法

阳光穿透心脏的1/2处 2022-05-24 00:55 247阅读 0赞

<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:

<table style="border-spacing:0px;margin-top:24px;margin-right:0px;margin-left:0px;background:rgb(250,250,250);color:rgba(0,0,0,.87);font-family:Roboto, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;font-size:14px;"> 
 <tbody> 
 <tr> 
 <th style="font-size:16px;padding:16px;vertical-align:top;max-width:100px;border-bottom-color:rgb(219,219,219);line-height:24px;background:rgba(219,219,219,.2);border-right-color:rgb(219,219,219);">Type</th> 
 <th style="font-size:16px;padding:16px;vertical-align:top;max-width:100px;border-bottom-color:rgb(219,219,219);line-height:24px;background:rgba(219,219,219,.2);border-right-color:rgb(219,219,219);">Target</th> 
 <th style="font-size:16px;padding:16px;vertical-align:top;max-width:100px;border-bottom-color:rgb(219,219,219);line-height:24px;background:rgba(219,219,219,.2);border-right-color:rgb(219,219,219);">Examples</th> 
 </tr> 
 <tr> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Property</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Element&nbsp;property Component&nbsp;property Directive&nbsp;property</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">src/app/app.component.html<pre style="min-height:32px;margin:16px 24px;white-space:pre-wrap;">content_copy<code style="font-family:'Droid Sans Mono', monospace;font-size:12.6px;">&lt;img [src]="heroImageUrl"&gt; &lt;app-hero-detail [hero]="currentHero"&gt;&lt;/app-hero-detail&gt; &lt;div [<a href="https://angular.io/api/common/NgClass" style="line-height:24px;letter-spacing:.3px;color:inherit;" rel="nofollow">ngClass</a>]="{'special': isSpecial}"&gt;&lt;/div&gt;</code></pre></td> 
 </tr> 
 <tr> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Event</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Element&nbsp;event Component&nbsp;event Directive&nbsp;event</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">src/app/app.component.html<pre style="min-height:32px;margin:16px 24px;white-space:pre-wrap;">content_copy<code style="font-family:'Droid Sans Mono', monospace;font-size:12.6px;">&lt;button (click)="onSave()"&gt;Save&lt;/button&gt; &lt;app-hero-detail (deleteRequest)="deleteHero()"&gt;&lt;/app-hero-detail&gt; &lt;div (myClick)="clicked=$event" clickable&gt;click me&lt;/div&gt;</code></pre></td> 
 </tr> 
 <tr> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Two-way</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Event and property</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">src/app/app.component.html<pre style="min-height:32px;margin:16px 24px;white-space:pre-wrap;">content_copy<code style="font-family:'Droid Sans Mono', monospace;font-size:12.6px;">&lt;input [(<a href="https://angular.io/api/forms/NgModel" style="line-height:24px;letter-spacing:.3px;color:inherit;" rel="nofollow">ngModel</a>)]="name"&gt;</code></pre></td> 
 </tr> 
 <tr> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Attribute</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Attribute (the&nbsp;exception)</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">src/app/app.component.html<pre style="min-height:32px;margin:16px 24px;white-space:pre-wrap;">content_copy<code style="font-family:'Droid Sans Mono', monospace;font-size:12.6px;">&lt;button [attr.aria-label]="help"&gt;help&lt;/button&gt;</code></pre></td> 
 </tr> 
 <tr> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">Class</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;"><code style="font-family:'Droid Sans Mono', monospace;color:rgb(51,51,51);letter-spacing:0px;line-height:1;padding:2px 0px;background-color:rgb(241,241,241);">class</code>&nbsp;property</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-bottom-color:rgb(219,219,219);line-height:24px;">src/app/app.component.html<pre style="min-height:32px;margin:16px 24px;white-space:pre-wrap;">content_copy<code style="font-family:'Droid Sans Mono', monospace;font-size:12.6px;">&lt;div [class.special]="isSpecial"&gt;Special&lt;/div&gt;</code></pre></td> 
 </tr> 
 <tr> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-style:none;line-height:24px;">Style</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-style:none;line-height:24px;"><code style="font-family:'Droid Sans Mono', monospace;color:rgb(51,51,51);letter-spacing:0px;line-height:1;padding:2px 0px;background-color:rgb(241,241,241);"><a href="https://angular.io/api/animations/style" style="line-height:24px;letter-spacing:.3px;color:inherit;" rel="nofollow">style</a></code>&nbsp;property</td> 
 <td style="padding:16px;letter-spacing:.3px;vertical-align:top;border-style:none;line-height:24px;">src/app/app.component.html<pre style="min-height:32px;margin:16px 24px;white-space:pre-wrap;">content_copy<code style="font-family:'Droid Sans Mono', monospace;font-size:12.6px;">&lt;button [style.color]="isSpecial ? 'red' : 'green'"&gt;</code></pre></td> 
 </tr> 
 </tbody> 
</table>