Question

我想知道如何解决此打字问题。我需要创建一个满足以下错误的界面，但我不明白此错误消息试图告诉我什么。

错误：

类型'（obj：Object）=> boolean'的参数不可分配给类型'（value：Object，index：number，array：Object []）的参数=> 价值是任何东西。签名'（（obj：Object）：boolean'必须是类型谓词。

部分解决问题后，我收到一个新错误：

“对象”类型上不存在“已检查”属性。

将“ Object []”替换为“ any []”后，上述错误已解决。那里有打字稿，以防止将来出现问题，使用“ any”被认为是不好的做法。那么，如何为“ searchResult”建立适当的接口？

打字稿包：

"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"

组件：

import { OrgUserResponseInterface } from './../../../shared/models/org-user-response.model';
import { CustomCheckboxComponent } from './../custom-checkbox/custom-checkbox.component';
import { Component, Input, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import {
  Grid,
  SelectionSettingsModel,
  ContextMenuItem,
  DataSourceChangedEventArgs,
  DataStateChangeEventArgs,
  FilterSettingsModel,
  EditSettingsModel,
  PageSettingsModel
} from '@syncfusion/ej2-grids';
import { Observable } from 'rxjs/internal/Observable';

import { OrgAdminsService } from '../../../shared/services/OrgAdminsService.model';
import { SecService } from '../../../shared/services/Sec.service';
import { SupService } from '../../../shared/services/Sup.service';



import { UserService } from "./../../../shared/services/UserManagement/User.service";
import { OrgService } from "./../../../shared/services/OrgManagement/Org.service";



interface clickObj {
  id: string;
}
@Component({
  selector: 'sf-data-table',
  templateUrl: './sf-data-table.component.html',
  styleUrls: ['./sf-data-table.component.css']
})
export class SfDataTableComponent implements OnInit {
  public data: Observable<DataStateChangeEventArgs>;
  public pageOptions: Object;
  public editSettings: EditSettingsModel;
  // public pageSettings: PageSettingsModel;
  public pageSettings: Object;
  public toolbar: string[];
  public state: DataStateChangeEventArgs;
  public dataList: Object[] = [];
  // TODO: make interface for the users object
  // public users: OrgUserResponseInterface;
  // public resizeSettings = { resizeMode: ej.Grid.ResizeMode.Control };
  public filterSettings: FilterSettingsModel;
  public contextMenuItems: ContextMenuItem[];
  // public grid: GridComponent;
  public errorMessage = "";
  public textWrapSettings;
  public selectionSettings: SelectionSettingsModel;

  public rowIsChecked: boolean;

  @Input('filter') filter: any;


  // 1. In child we create a click event variable with the Output decorator and set it equal to a new event emitter
  public clickObject: any;

  @Output() clickObjectEvent = new EventEmitter();

  @ViewChild('grid') grid: Grid;

  @Input('usingService') usingService: string; // this gets an indication from the parent component hosting this data-table and displays the service/data that component needs displayed
  currentService: any; /// this is going to contain the service we will use in each instance of the sf data table component which depends on usingService from its parent component

  //! temp removed put back after api functions are restored to WebApiService. Currently use DataServbice
  //!

  constructor(private _supService: SupService, private _secService: SecService, private _orgAdminsService: OrgAdminsService, private _userService: UserService, private _orgService: OrgService) {
    // this.data = this.currentService;   //this is where we bring in the data?
    this.textWrapSettings = { wrapMode: "header" };
  }

  // 2. Then we create a function sendObject that calls emit on this object with the message we want to send
  sendClickObject(args) {
    this.clickObject = this.grid.getRowInfo(args.target)
    this.clickObjectEvent.emit(this.clickObject)
    console.log(this.dataList);

    if (this.clickObject.target.className === "custom-checkbox" || "custom-checkbox-checked") {
      this.getCurrentServiceObjectFromClick();
    }
  }

  getCurrentServiceObjectFromClick() {
    var searchResult = this.dataList.filter<any>((obj:clickObj) => {
      return obj.id === this.clickObject.rowData.id;
    })
    if (searchResult[0].checked === undefined) {
      searchResult[0].checked = true;
      console.log('checked')
    } else {
      searchResult[0].checked = !searchResult[0].checked;
    }
    console.log(searchResult);

  }

  onClick(args) {
    console.log(this.grid.getRowInfo(args.target))
  }

  ngOnInit(): void {

    if (this.usingService === 'userServiceTable') {
      this.currentService = this._userService;



    } else if (this.usingService === 'orgServiceTable') {

      this.currentService = this._orgService;

      console.debug("OrgServiceTable: " + this.currentService);
    } else if (this.usingService === 'supServiceTable') {
      this.currentService = this._supService;
    } else if (this.usingService === 'secServiceTable') {
      this.currentService = this._secService;
    } else if (this.usingService === 'orgAdminsServiceTable') {
      this.currentService = this._orgAdminsService;
    }
    this.getGridData(); // step 1: call component method



    const state = { skip: 0, take: 7 };
    this.currentService.execute(state); // step 4: component initiates call to service method execute
    // this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search']; // step 7: toolbar is setup
    this.toolbar = ['Search']; // step 7: toolbar is setup
    this.selectionSettings = { type: 'Multiple' };
    this.editSettings = { //step 8: settings are setup
      allowEditing: true,
      allowDeleting: true,
      allowAdding: true,
      mode: 'Dialog',
      showDeleteConfirmDialog: true
    };
    this.filterSettings = { type: "Menu" }; // step 9: filter settings are setup
    this.contextMenuItems = ['AutoFit', 'AutoFitAll', 'SortAscending', 'SortDescending',  ///step 10: context menus are setup
      'Copy', 'Edit', 'Delete', 'Save', 'Cancel',
      'PdfExport', 'ExcelExport', 'CsvExport', 'FirstPage', 'PrevPage',
      'LastPage', 'NextPage', 'Group', 'Ungroup'];
  }

  getGridData(): void {


    this.currentService.getAll() // step 2:  call the service method on the component and subscribe
      .subscribe((response) => { this.dataList = response; console.log(this.dataList) },
        (error) => { this.errorMessage = error.Message; });

    // this.currentService.getAllUsers() // step 2:  call the service method on the component and subscribe
    //   .subscribe((response) => { this.users = response; console.log(this.users) },
    //     (error) => { this.errorMessage = error.Message; });
  }



  public dataStateChange(state: DataStateChangeEventArgs): void {
    this.currentService.execute(state);                     // for binding the data.
  }

  public dataSourceChanged(state: DataSourceChangedEventArgs): void {
    if (state.action === 'add') {
      this.currentService.addUser(state).subscribe(() => state.endEdit());
    } else if (state.action === 'edit') {
      this.currentService.updateUser(state).subscribe(() => state.endEdit());
    } else if (state.requestType === 'delete') {
      this.currentService.deleteUser(state).subscribe(() => state.endEdit());
    }
  }
}

上下文：此组件用于显示网格。当前引发错误的函数用于捕获click事件，按id过滤并向行对象数据添加一个check = true键值。该对象将与下游的行为主体同步。

Answer 1

尝试删除any函数类型中的filter。

var searchResult = this.dataList.filter((obj:clickObj) => {
    return obj.id === this.clickObject.rowData.id;
})

打字稿2.7.2：无法阅读此错误消息

1 个答案: