Angular学习第二天

Angular学习第二天

第天二学习目标
1. 如何递归显示数组列表内容
2. 如何响应点击事件
3. 如何更改CSS
4. 如何处理未定义变量

在第一天工程上做修改
打开app.component.ts文件创建一个用户列表数组

const USERS: User[] = [
  {id: 1, name: 'A'},
  {id: 2, name: 'B'},
  {id: 3, name: 'C'},
  {id: 4, name: 'D'},
  {id: 5, name: 'E'},
];

同时在AppComponent类中增加一个用户列表变量和选中用户及选择响应函数

  users = USERS;
  selectedUser: User;

  onSelect(user: User): void {
    this.selectedUser = user;
  }

打开app.component.html

<ul>
  <li *ngFor="let user of users" [class.selected]="user === selectedUser" (click)="onSelect(user)">
    <label>{{user.id}}</label> {{user.name}}
  </li>
</ul>
<div *ngIf="selectedUser">
  <label>{{selectedUser.id}}</label>
  <input [(ngModel)]="selectedUser.name" placeholder="名字">
</div>

打开app.component.css文件，输入

.selected {
    background-color: red !important;
    color: white;
  }

重新刷新浏览器应该正确运行。同时可以选择其中一个用户并做一下编辑可看到列表上的内容也实时进行了修改

通过一个简单例子再来回顾原定的目标
1. 如何递归显示数组列表内容
使用ngFor指令来处理，注意在ngFor之前一定要加*号，表达式为*ngFor=”let var of list”
2. 如何响应点击事件
表达式为(==event==)=”func(==input param list==)”，event包括click等等关键字
3. 如何更改CSS
表达式为[css.==style==]=”expression”
4. 如何处理未定义变量
使用ngIf指令来处理，注意在ngIf之前要加星号，表达式为*ngIf=”expression”