如何在Angular 4中从输入框向Angular Material表格手动添加新行

嘿，这个需求很常见，我给你整理了完整的实现步骤，直接就能用在Angular 4项目里：

1. 先确认依赖与模块导入 #

首先得确保你的项目里已经正确引入了Angular Material的相关模块，并且版本和Angular 4匹配（建议用@angular/material@5.x，因为Angular 4对应Material 5版本）。在你的根模块或者功能模块里添加以下导入：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms'; // 因为要用ngModel双向绑定，必须导入这个

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

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

2. 组件类逻辑（.ts文件） #

定义数据结构、初始化表格数据源，再写添加行的核心方法：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

// 定义州的数据接口，规范数据格式
interface State {
  name: string; // 州名称
  code: string; // 州代码
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 表格要展示的列名，和模板里的matColumnDef对应
  displayedColumns: string[] = ['name', 'code'];
  // 初始化表格数据源，可以加一些默认数据，也可以为空数组
  dataSource = new MatTableDataSource<State>([
    { name: '加利福尼亚州', code: 'CA' },
    { name: '德克萨斯州', code: 'TX' }
  ]);

  // 用来绑定输入框的临时对象，存储用户输入的新州数据
  newState: State = { name: '', code: '' };

  /**
   * 添加新行的方法
   */
  addRow() {
    // 简单校验：确保两个输入框都不为空
    if (!this.newState.name.trim() || !this.newState.code.trim()) {
      alert('请填写完整的州名称和代码！');
      return;
    }

    // 把新数据添加到数据源中——这里用扩展运算符创建新数组，保证数据源的可观察性
    this.dataSource.data = [...this.dataSource.data, { ...this.newState }];
    // 清空输入框，方便下次输入
    this.newState = { name: '', code: '' };
  }
}

3. 模板文件（.html） #

编写输入区域和表格的UI布局，用Angular Material的组件：

<!-- 输入区域：两个输入框 + 添加按钮 -->
<div class="input-container" style="margin: 2rem; display: flex; gap: 1rem; align-items: flex-end;">
  <mat-form-field appearance="fill">
    <mat-label>州名称</mat-label>
    <input matInput [(ngModel)]="newState.name" placeholder="例如：加利福尼亚州">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>州代码</mat-label>
    <input matInput [(ngModel)]="newState.code" placeholder="例如：CA">
  </mat-form-field>

  <button mat-raised-button color="primary" (click)="addRow()">添加新行</button>
</div>

<!-- 表格区域 -->
<div class="table-container" style="margin: 2rem;">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <!-- 州名称列定义 -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> 州名称 </th>
      <td mat-cell *matCellDef="let state"> {{state.name}} </td>
    </ng-container>

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

    <!-- 表头行 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <!-- 数据行 -->
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

一些注意事项 #

• 版本匹配：Angular 4必须搭配对应版本的Angular Material，建议执行npm install @angular/material@5.2.5 @angular/cdk@5.2.5来安装兼容版本
• 校验优化：如果需要更严谨的输入校验，可以改用Angular的Reactive Forms，比如添加表单验证规则
• 样式自定义：可以通过修改.mat-elevation-z8或者自定义CSS类来调整表格和输入区域的样式

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