Angular Material

至于使用这个Angular Material的原因呢，随便选的。

表格处理

记录一下第一张表 这张表用的($event)很鸡肋响应差还经常查不到，下面有改进版

mat-table中row如果需要排序，不要使用index绑定函数

否则会出现排序和传参不同的问题

<mat-form-field appearance="standard">
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>
<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> ID</th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>
    <ng-container matColumnDef="brief">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Brief</th>
      <td mat-cell *matCellDef="let row"> {{row.brief}} </td>
    </ng-container>
    <ng-container matColumnDef="createDate">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> CreateDate</th>
      <td mat-cell *matCellDef="let row"> {{row.createDate}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <!-- Row shown when there is no matching data. -->
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
    </tr>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
</div>

import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {CollectionService} from "./service/collection.service";
import {LoginService} from "../../login.service";
import {MatSort} from "@angular/material/sort";
import {MatPaginator} from "@angular/material/paginator";
import {MatTableDataSource} from "@angular/material/table";
import {Collection} from "./class/collection";
@Component({
  selector: 'app-buttons',
  templateUrl: './collections.component.html',
  styleUrls: ['./collections.component.scss']
})
export class CollectionsComponent implements AfterViewInit {
  displayedColumns: string[] = ['id', 'name', 'brief', 'createDate'];
  //这一行对应matColumnDef属性
  dataSource: MatTableDataSource<Collection>;
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  //此处很关键 直接写 ： 会报错 必须加上 ！
  constructor(
  public collectionService: CollectionService,
   public loginService: LoginService
  ) {
    this.getCollectionsByUserId(this.loginService.user.id);
    this.dataSource = new MatTableDataSource(this.collectionService.collectionList);
  }
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
  getCollectionsByUserId(id: number) {
    this.collectionService.getCollectionsByEditorId(id)
      .subscribe(CollectionData => this.collectionService.collectionList = CollectionData.data)
  }
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

改进！！！！！！

applyFilter(filterValue: String) {
  this.dataSource.filter = filterValue.trim().toLowerCase();
  if (this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
  }
}

<mat-form-field appearance="standard">
  <mat-label>搜索</mat-label>
  <input matInput #input (input)="applyFilter(input.value)">
</mat-form-field>

响应数据的方式

constructor(
  public collectionService: CollectionService,
  public loginService: LoginService,
  public categoryService: CategoryService//用于获取category作为选项卡使用
) {
  this.collectionService.getCollectionsByEditorId(this.loginService.user.id)
    .subscribe(R => {
    this.collectionService.collectionList = R.data;
    this.dataSource.data = this.collectionService.collectionList;//再填入数据
  });
  this.dataSource = new MatTableDataSource(this.collectionService.collectionList);//先new
  }

Router和ActivatedRouter的区别

暂时知道activatedRouter可以查url中的参数

angularMaterial中，弹出框需要单独设置一个component，还是挺麻烦的

https://material.angular.cn/components/dialog/overview

(checked)是单向绑定，在滑块开关中需要注意，换成[(ngModel)]才能双向绑定

https://github.com/angular/components/issues/3161

Icon相关

https://jossef.github.io/material-design-icons-iconfont/