如何在Angular 4中使用Angular Material表格实现数据添加功能？

我来给你一步步拆解怎么实现这个需求，在Angular 4里用Angular Material的数据表格完成添加功能其实很清晰，咱们分步骤来：

1. 确保依赖安装正确 #

首先得确保你已经安装了对应Angular 4版本的Angular Material和CDK，版本不匹配容易出问题。在项目根目录运行：

npm install @angular/material@2.0.0-beta.12 @angular/cdk@2.0.0-beta.12 --save

同时别忘了在你的模块里导入需要的Material模块和表单模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule, MatInputModule, MatButtonModule } from '@angular/material';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatInputModule,
    MatButtonModule,
    ReactiveFormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 定义数据模型 #

先创建一个简单的接口来规范州的数据结构，可以写在组件文件里，也可以单独建一个model文件：

export interface State {
  name: string;
  code: string;
}

3. 组件核心逻辑 #

接下来写组件类的代码，我们用响应式表单处理输入，同时管理表格的数据源：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { MatTableDataSource } from '@angular/material';
import { State } from './state.model'; // 如果是单独文件记得导入，否则直接在组件内定义

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  stateForm: FormGroup;
  displayedColumns = ['name', 'code']; // 表格要显示的列字段
  dataSource = new MatTableDataSource<State>();

  constructor(private fb: FormBuilder) {
    // 初始化表单
    this.stateForm = this.fb.group({
      name: [''],
      code: ['']
    });

    // 可以先加几条测试数据
    this.dataSource.data = [
      { name: 'California', code: 'CA' },
      { name: 'Texas', code: 'TX' }
    ];
  }

  addState() {
    // 获取表单输入的新州信息
    const newState: State = {
      name: this.stateForm.value.name,
      code: this.stateForm.value.code
    };

    // 把新数据添加到数据源数组（用扩展运算符创建新数组，触发变更检测）
    this.dataSource.data = [...this.dataSource.data, newState];

    // 清空表单，方便下次输入
    this.stateForm.reset();
  }
}

4. 编写模板文件 #

最后是HTML模板，把输入表单和Material表格结合起来：

<!-- 输入表单 -->
<form [formGroup]="stateForm" class="state-form">
  <mat-form-field>
    <input matInput placeholder="州名称" formControlName="name">
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="州代码" formControlName="code">
  </mat-form-field>
  <button mat-raised-button color="primary" (click)="addState()">添加</button>
</form>

<!-- Material数据表格 -->
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 州名称列定义 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 州名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- 州代码列定义 -->
  <ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef> 州代码 </th>
    <td mat-cell *matCellDef="let element"> {{element.code}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

可以给表单和表格加一点基础样式，让布局更美观：

.state-form {
  margin: 20px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

table {
  width: 80%;
  margin: 0 20px;
}

这样操作下来，你输入州名称和代码，点击添加按钮，新的条目就会立刻显示在表格里了。如果需要做表单验证（比如必填项），还可以给表单控件加验证规则，这里就先不展开了。

内容的提问来源于stack exchange，提问作者chethu