Angular Material MatTable组件通过Http获取数据

本文时间：2021年3月10日13:44:52

首先吐槽一下Angular Material官方的示例写的也太随心所欲了，光是一个hppt请求数据，然后展示在界面上就花了我好几天。

示例地址：https://github.com/EchoBeTaken/angular-table-demo

1. 环境

项目环境，在当前应该是最新的，（但是官方的分页组件还在提示我初始化缺少参数）

@ViewChild(MatPaginator) paginator: MatPaginator;

就这个，我自己用的时候永远报错

话题扯开了不多讲，这个问题等下一篇文章来解决。

1. 安装angular/cli和Material

简单，不多讲

2.页面中添加一个表格组件，修改app.component.html

<div>
  <table mat-table [dataSource]="settingDataSource" class="full-width-table" matSort aria-label="Elements">
    <!-- 表头 -->
    <!-- displayedColumns:这个数组表示的每一列的顺序 -->
    <!-- sticky: true 表示表头固定，内容上下滚动的时候，表头不动 -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    <!-- 行号 -->
    <ng-container matColumnDef="rowIndex">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>行号</th>
      <td mat-cell *matCellDef="let row, index as i">{{i + 1}}</td>
    </ng-container>

    <!-- 名称 -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>名称</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>

    <!-- 类型 -->
    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>类型</th>
      <td mat-cell *matCellDef="let row">{{row.type}}</td>
    </ng-container>

    <!-- 创建者id -->
    <ng-container matColumnDef="createId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>创建者</th>
      <td mat-cell *matCellDef="let row">{{row.createId}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="createTime">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>创建时间</th>
      <td mat-cell *matCellDef="let row">{{row.createTime}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="updateTime">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>更新时间</th>
      <td mat-cell *matCellDef="let row">{{row.updateTime}}</td>
    </ng-container>

    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

  </table>
</div>

2. app.component.ts中修改为

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { HttpService } from './http.service';
import { Individuation } from './Individuation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // 数据列顺序
  displayedColumns: string[] = ['rowIndex', 'name', 'type', 'createId', 'createTime', 'updateTime'];
  // 数据数组
  settingList: Individuation[] = [];
  // 使用自带的DataSource包装数据
  settingDataSource = new MatTableDataSource<Individuation>(this.settingList);

  constructor(
    private httpService: HttpService
  ) {

  }

  ngOnInit(): void {
    this.getSettingData();
  }

  getSettingData(): void {
    const url = 'http://localhost:8080/setting/getSettingListByTypeWithNoTokenMap';
    const data = {
      "type": 4
    };
    // 调用hhtp服务请求数据，主要是为了将请求的一些公关内容提取为一个服务
    this.httpService.getSettingData(url, data)
      .subscribe({
        next: (result) => {
          console.log(result);
          this.settingList = result.data;
          this.settingDataSource.data = result.data;
        },
        error: (err) => (console.log(err)),
      });
  }
}

3.记得在app.module.ts中引入HttpClient

import { HttpClientModule } from '@angular/common/http';

4. 服务端（springboot项目中的controller）

	@PassToken
	@RequestMapping(value = "/getSettingListByTypeWithNoTokenMap", method = RequestMethod.POST)
	public RetResult<List<Setting>> getSettingListByTypeWithNoTokenMap(int type) {
//		int type = data.get("type");
//		System.out.println("map");
		RetResult<List<Setting>> result = settingSevice.getSettingListByType(type);
		return result;
	}

 

5. 结果

6.返回数据

7.请求过程（这种请求方式，为了使用服务端，post请求将参数写在了url上，否则angular在发送请求的时候，携带的参数是json格式，传对象更加方便一点，只有一个参数的话，就有点麻烦了）