Angular 7 - 如何从表格中获取数据？_编程开发

Angular 7 - 如何从表格中获取数据？

创始人

2024-10-16 15:32:12

0次

在Angular 7中从表格中获取数据的解决方法如下：

在组件中定义一个数组来存储表格数据：

export class AppComponent {
  tableData = [
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 25 },
    { id: 3, name: 'Bob Johnson', age: 35 }
  ];
}

在模板中使用*ngFor指令来循环渲染表格行，并显示数据：


  
    
      ID
      Name
      Age
    
  
  
    
      {{ data.id }}
      {{ data.name }}
      {{ data.age }}

ID	Name	Age
{{ data.id }}	{{ data.name }}	{{ data.age }}

如果你想从表格中获取选定的行数据，可以在模板中添加点击事件处理程序，并将选定的行数据传递给处理函数：

在组件中定义一个处理函数来获取选定的行数据：

export class AppComponent {
  selectedRow: any;

  getRowData(data: any) {
    this.selectedRow = data;
    console.log(this.selectedRow); // 在控制台中打印选定的行数据
  }
}

通过以上步骤，你可以在Angular 7中从表格中获取数据。

上一篇：Angular 7 - 如何从表单获取已编辑的字段

下一篇：Angular 7 - 如何检查用户是否直接导航到页面

Angular 7 - 如何从表格中获取数据？

相关内容

热门资讯