Angular学习片段2

1.条件渲染ngIf

<!-- 条件渲染 -->
<div *ngIf="person == '广州人'">广州人</div>

<div *ngIf="person == '湖北人'">湖北人</div>

<!-- 切换显示 -->
<button (click)="qiehuan()">切换显示</button>

ts文件里

export class AppComponent {
  person:string = '广州人'
  qiehuan() : void {
    this.person = this.person == '广州人' ? '湖北人' : '广州人'
  }
}

<!-- style样式渲染 -->
<!-- 颜色的改变   点击变色 -->

<div [style.color]="color == '红色' ? 'red' : 'green'" (click)="qiehuanColor()">点我变色</div>

ts文件里

 color:string = '红色'

  qiehuanColor() : void {
    this.color = this.color == '红色' ? '绿色' : '红色'
  }

2.数据循环ngFor

<!-- 循环 -->
<ul>
  <li *ngFor="let item of arr;let i = index" (click)="getData(i,item)">
    第{{i+ 1}}个  {{item}}
  </li>
</ul>

  getData(i:number,item:string):void {
    alert(`我喜欢第${i+1}个人，是${item}`)

  }

3.input框输入双向绑定

<div>
  <label for=""></label>
  <input  type="text" [(ngModel)]="name">
</div>

<div>
  <label for=""></label>
  <input type="text" [(ngModel)]="password">
</div>

<h1>用户名：{{name}}</h1>
<h1>密码：{{password}}</h1>
<hr>

ts文件里

export class AppComponent {
  name:''
  password:''

}

4.input框中获取输入文本

<div>
  <label for="">用户名：</label>
  <input #input1  type="text" >
</div>

<div>
  <label for="">密码：</label>
  <input #input2 type="text" >
</div>

<button (click)="getNamePass(input1.value,input2.value)">点击获取账号与密码</button>

  getNamePass(name :string,password: string) :void{
    console.log(name,password)
  }