时间戳

首页 > 解决方案 > 错误类型错误：this.dataSource.filter 不是函数

angular - 错误类型错误：this.dataSource.filter 不是函数

问题描述

我正在使用 Angular 6 使用对话框内联行操作来实现材料表中的编辑/添加/删除行，但是当我按下更新按钮时出现错误 datasource.filter is not a function 我不知道这里有什么问题以及什么我失踪了吗？

这是我的 update-admin-info.component.ts*

```import { Component, ViewChild, OnInit, ChangeDetectorRef   } from '@angular/core';
import {MatTableDataSource, MatTable} from '@angular/material/table';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import { UserService } from '../services/user.service';
import { User } from '../model/User.model'
import { DialogeditComponent } from '../dialogedit/dialogedit.component';


@Component({
  selector: 'app-update-admin-info',
  templateUrl: './update-admin-info.component.html',
  styleUrls: ['./update-admin-info.component.css']
})
export class UpdateAdminInfoComponent implements OnInit {
  displayedColumns: string[] = ['firstname', 'lastname', 'email','college','department','action'];
   dataSource;
  users: User[];

  @ViewChild(MatTable,{static:true}) table: MatTable<any>;

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }


  constructor(public dialog: MatDialog,private userservice:UserService,private cdr: ChangeDetectorRef) { }

  ngOnInit() {
    this.userservice.getAdmins()
    .subscribe((users: User[]) => {
      this.users = users;
      this.dataSource = new MatTableDataSource(users);

    });
  }

  editUser(action,obj)
{
  obj.action = action;
 const dialogRef = this.dialog.open(DialogeditComponent,{
    width: '250px',
    data:obj

  });
  dialogRef.afterClosed().subscribe(result => {
    if(result.event == 'update')
    {
      this.updateRowData(result.data);
    }

  });

     this.cdr.detectChanges();
}

updateRowData(row_obj){
  this.dataSource = this.dataSource.filter((value,key)=>{
    if(value._id == row_obj.id){
      value.firstname = row_obj.firstname;
    }
    return true;
  });

 this.cdr.detectChanges();
 this.table.renderRows();
}


}```

这是我的 Dialogedit.component.ts

```import { Component, OnInit, Inject, ChangeDetectorRef } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { User } from '../model/User.model';
import { UserService } from '../services/user.service';
import { UpdateinfoService } from '../services/updateinfo.service';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { FormGroup, Validators, FormControl, AbstractControl } from '@angular/forms';



@Component({
  selector: 'app-dialogedit',
  templateUrl: './dialogedit.component.html',
  styleUrls: ['./dialogedit.component.css'],
  providers: [UserService]
})
export class DialogeditComponent implements OnInit {

  action:string;
  local_data:any;

  constructor(public dialogRef: MatDialogRef<DialogeditComponent>,
    @Inject(MAT_DIALOG_DATA) public data: User, public http: HttpClient, public updateinfo: UpdateinfoService, public router: Router, private userservice:UserService,private cdr: ChangeDetectorRef) {  console.log(data);
      this.local_data = {...data};
      this.action = this.local_data.action;}

  ngOnInit() {


  }
  onNoClick(): void {
    this.dialogRef.close({event:'Cancel'});
    this.cdr.detectChanges();
  }

  onEdit() {
    this.dialogRef.close({event:this.action,data:this.local_data});
    this.userservice.selectedUser =this.local_data;
    this.cdr.detectChanges();
  }


}```

这是我的 Dialogedit.component.html

```<h1 mat-dialog-title>Row Action :: <strong>{{action}}</strong></h1>
    <div mat-dialog-content>
        <mat-form-field *ngIf="action != 'Delete'; else elseTemplate">
          <input   matInput [(ngModel)]="local_data.firstname" placeholder="First Name">
        </mat-form-field>
        <mat-form-field>
          <input  matInput [(ngModel)]="local_data.lastname" placeholder="Last Name">
        </mat-form-field>
      </div>
      <div mat-dialog-actions>
        <button mat-button (click)="onNoClick()"  mat-flat-button color="warn">Cancel</button>
        <button  mat-button (click) = "onEdit(local_data)"  >{{action}}</button>
      </div>```

我得到的错误在这里this.dataSource = this.dataSource.filter((value,key)=>{

标签： angular

解决方案

我已经完成了代码，MatTableDataSource它get data()返回了对象数组。所以你应该使用this.dataSource.data.filter而不是this.dataSource.filter.

根据你的第二个问题，

如果有人可以帮助我解决如何使用 matDialog 在表格上实现内联编辑，我的数据仍然无法更新

这是一个新线程，请在 SO 上打开新问题。

推荐阅读