Angular 属性绑定,条件判断,循环,事件绑定

属性绑定简单例子

css的选择器都需要通过下面语法进行绑定:

<div [id] = "'box'">属性绑定</div>
<!--通过变量绑定-->
<div [id] = tag>通过变量绑定</div>
<!--class绑定-->
<div [class] = "'myClass'">class绑定</div>
<!--多样式绑定-->

<h3 [style] = "'color:red;width:300px'">多样式绑定</h3>

变量区:

条件判断测试

定义一个boolean变量

条件表达式使用*ngIf使用:
<h3 *ngIf = "bool">条件判断测试</h3>
如果bool变量改为false 则页面不会显示上面代码
同时注意:
ngif影响的是元素是否被渲染 而不是是否隐藏显示

if else

变量改为false
bool:boolean = false
使用下段代码测试 if else

<h3 *ngIf = "bool;else elseBlock">条件判断测试</h3>
<ng-template #elseBlock>else测试</ng-template>

界面效果

成功起到了if else效果

循环

定义一个数组
colors:Array<string> = ['red','blue','yellow']
循环测试

<div *ngFor="let color of colors let i = index">
  {{i}}
  {{color}}
</div>

效果:

事件绑定

现在我们有界面如下:

现在需要为每个产品添加一个按钮 绑定一个share事件
代码如下:

通过(click)绑定事件
share方法定义在变量区同一个位置

传递参数写法:
<button (click)="share(product.name)">Share</button>

  share(e:string) {
    window.alert(e);
  }