Angular学习笔记四——显示数据及添加事件
1.显示用户列表数据
在users.component.ts中添加users属性:
import { Component, OnInit } from '@angular/core';
import { User } from '../../model/user';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users: User[] = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '赵六' },
{ id: 5, name: '田七' },
{ id: 6, name: '杜八' }
];
constructor() { }
ngOnInit(): void {
}
}
在users.component.html中,使用*ngFor来显示数据:
<div>
<h2>我的用户</h2>
<ul class="users">
<li *ngFor="let user of users">
<span class="ba