二、指令，属性绑定

一、指令

ngFor

<div *ngFor="let item of arr">{{item.name}}</div>
export class HeaderComponent implements OnInit {
  public arr:object [] = [{name:"html",age:10},{name:"css",age:30}]
  public isShow:boolean = true;
}

获取多个值

<li *ngFor="let item of todos, let i = index" [ngClass]="{completed: item.done}">
        <div class="view" >
          <button class="destroy" (click)="deleteTodo(i)"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template">
      </li>

ngIf

<div *ngIf="isShow">你好</div>
export class HeaderComponent implements OnInit {
  public arr:object [] = [{name:"html",age:10},{name:"css",age:30}]
  public isShow:boolean = true;
}

ngSwitch

<div [ngSwitch]="status">
    <div *ngSwitchCase="1">1</div>
    <div *ngSwitchCase="2">2</div>
    <div *ngSwitchDefault>默认</div>
</div>

ngClass

语法规则：

<div [ngClass]="{
  css类名: 布尔值,
  css类名: 布尔值
}">测试文本</div>

<p [ngClass]="{'red': flag}">header works!</p>
//flag为true,则添加class为red

<p [ngClass]="{'red': flag,'blue':!flag}">header works!</p>
//flag为true则class添加red,false则添加blue

小练习 list中的偶数项目添加class

public list:any []=[{name:"lisi"},{name:"zhangsan"},{name:"wangwu"}]

<div *ngFor="let item of arr;let key=index" [ngClass]="{'red':key%2==0}">
    {{key}}-{{item.name}}
</div>

ngStyle

<div [ngStyle]="{'color': 'red'}">header</div>

动态绑定样式

 public attr:string = "red"

<div [ngStyle]="{'color': attr}">header</div>

二、属性绑定

<img [src]="imageUrl" >
  or
<img src="{{imageUrl}}">