Angular6 学习笔记——组件详解之模板语法

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址:

https://www.angular.cn/guide/template-syntax

http://www.ngfans.net/topic/12/post/2

<p>定义的变量:{{str}}</p>
<p>简单数学运算:1+1={{1+1}}</p>
<p>调用方法:{{getValue()}}</p>

<input #inputVal>
<p>{{inputVal.value}}</p>
<button class="btn btn-success" (click)="print(inputVal.value)">打印</button>

<img [src]="imgSrc" />
<button (click)="changeImgSrc()">
将事件changeImgSrc()绑定到button上来,
修改imgSrc变量的值,改变img标签通过值绑定的src属性的值
</button>

<input [(ngModel)]="str">
<p>{{str}}</p>
<button (click)="changeStr()"></button>

<p *ngIf="1>=2">为false不显示</p>
<p *ngIf="isShow">变量控制是否显示</p>

<ul>
<li *ngFor="let item of arr;let i=index;">
{{i+1}}:{{item.value}}
</li>
</ul>

<span [ngSwitch]="num">
<span *ngSwitchCase="'1'">值为1</span>
<span *ngSwitchCase="'2'">值为2</span>
<span *ngSwitchCase="'3'">值为3</span>
<span *ngSwitchCase="'4'">值为4</span>
<span *ngSwitchCase="'5'">值为5</span>
<span *ngSwitchDefault>默认值10</span>
</span>

<p [ngClass]="{'special':true}">用NgClass添加样式类</p>

<p [ngStyle]="{'color':1>2?'red':'blue'}">用NgStyle控制内联样式</p>
<div [ngStyle]="{'background-image': 'url('+x.ImgUrl+')','width':'100%','height':'120px','background-size':'cover'}">

<p>{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}</p>

<p>{{Obj?.value}}</p>

"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";

文档信息

• 发表作者：  半路独行
• 发表出处：  博客园
• 原文地址：  https://www.cnblogs.com/banluduxing/p/9290208.html
• 版权信息：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。