如何在 Angular Material DatePicker 元素中存储数据？

Question

我为 Angular8 使用材料角度。 在这里，当我在 DatePicker 中单击某个日期时，我希望它在我的记录中过滤该日期发生的事情。 我该怎么做？

1. HTML 添加文件

    <mat-form-field>
      <input matInput readonly [matDatepicker]="picker" placeholder="Date of birth" formControlName="dob"
        (dateChange)="formatDate($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
      <mat-error *ngIf="handleError('dob', 'required')">
        Date of birth is required
      </mat-error>
    </mat-form-field>

2. TS 列表文件

import { Student } from './../../shared/student';
import { ApiService } from './../../shared/api.service';
import { Component, ViewChild, OnInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

@Component({
selector: 'app-students-list',
templateUrl: './students-list.component.html',
styleUrls: ['./students-list.component.css']
})

   export class StudentsListComponent implements OnInit {
   StudentData: any = [];
   dataSource: MatTableDataSource<Student>;
   @ViewChild(MatPaginator, { static: false }) paginator: 
   MatPaginator;
   displayedColumns: string[] = ['_id', 'student_name', 
  'student_email', 'section', 'test', 'action'];

  constructor(private studentApi: ApiService) {
     this.studentApi.GetStudents().subscribe(data => {
     this.StudentData = data;
     this.dataSource = new MatTableDataSource<Student>. 
     (this.StudentData);
     setTimeout(() => {
         this.dataSource.paginator = this.paginator;
     }, 0);
  })    
  }


  ngOnInit() { }

  deleteStudent(index: number, e){
  if(window.confirm('Emin misiniz?')) {
  const data = this.dataSource.data;
  data.splice((this.paginator.pageIndex * this.paginator.pageSize) + 
  index, 1);
  this.dataSource.data = data;
  this.studentApi.DeleteStudent(e._id).subscribe()
   }
   }


    }

所以我不知道我该怎么做。 如果你能帮助我，我会很高兴。

Answer 1

在您的 html 文件中，您有一个指令 (dateChange)="formatDate($event)" 保存密钥

因此，在您的 ts 文件中，您将拥有函数 formatDate 的实现，该函数将具有当前选择，您可以使用 can 来过滤您的数据。

如果你还在努力制作一个 stackbliz，我很乐意更新它。 最好的事物。