Angular学习笔记第四章——显示数据及添加事件

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