要在不刷新表格的情况下添加新行，可以使用Angular Material表格和数据源进行操作。以下是一个示例代码解决方法：

1. 首先，确保已经安装了Angular Material和相关的依赖库。

2. 在你的组件中，导入所需的库和模块：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { MatPaginator } from '@angular/material/paginator';

3. 在组件类中，定义表格的列和数据源以及其他必要的变量：

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css']
})
export class MyTableComponent implements OnInit {

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource: MatTableDataSource;
  newData: any = {};

  // 获取表格的排序和分页组件
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngOnInit() {
    // 初始化表格数据源
    this.dataSource = new MatTableDataSource();
    this.dataSource.data = [
      {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
      {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
      {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
      {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
      {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
    ];
    // 设置排序和分页
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  // 添加新行
  addNewRow() {
    const data = this.dataSource.data;
    data.push(this.newData);
    this.dataSource.data = data;
    this.newData = {};
  }
}

4. 在组件的HTML模板中，使用Angular Material的表格指令和相应的控件：

  
      
      
      
      


    
    
 No. 
      
 {{element.position}} 
    

    
 Name 
      
 {{element.name}} 
    

    
 Weight 
      
 {{element.weight}} 
    

    
 Symbol 
      
 {{element.symbol}} 
    

    
    

    

  

  
  

    
      
    

    
      
    

    
      
    

    
      
    

    Add Row
  

  
            
            
            

                
                            
            

                

                    上一篇：Angular Material: 在 mat-checkbox 和 mat-radio 被选中时改变标签文本的颜色

                
                

                    下一篇：Angular Material: 在对话框上方显示侧边栏                
            
            
            

                
                
相关内容