时间戳

首页 > 解决方案 > 如何将数据存储在 Angular Material DatePicker 元素中？

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

问题描述

我对 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()
   }
   }


    }

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

标签： angularangular-material

解决方案

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

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

如果您仍在努力制作一个 stackbliz，我将很乐意对其进行更新。最好的。

推荐阅读