将数据绑定到angular中具有本地存储数据的表

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit {
  tableData: any[];

  constructor() { }

  ngOnInit() {
    // 从本地存储中获取数据
    const storedData = localStorage.getItem('tableData');
    this.tableData = storedData ? JSON.parse(storedData) : [];

    // 示例数据，可以根据实际需求进行修改
    this.tableData.push({ id: 1, name: 'John Doe', age: 25 });
    this.tableData.push({ id: 2, name: 'Jane Smith', age: 30 });

    // 将数据保存到本地存储
    localStorage.setItem('tableData', JSON.stringify(this.tableData));
  }

  addRow() {
    // 添加新行
    const newRow = { id: 3, name: 'New Row', age: 40 };
    this.tableData.push(newRow);

    // 更新本地存储中的数据
    localStorage.setItem('tableData', JSON.stringify(this.tableData));
  }

  deleteRow(index: number) {
    // 删除指定索引的行
    this.tableData.splice(index, 1);

    // 更新本地存储中的数据
    localStorage.setItem('tableData', JSON.stringify(this.tableData));
  }
}