angular2-datatable中的Angular 2搜索文件管理器查询 - 类型“{}”上不存在属性“first_name”

时间:2017-10-18 09:58:44

标签: javascript angular typescript angular-cli

在我的Angular-cli项目中,我使用搜索过滤器为数据表实现了此代码。我使用了loadsh在以下链接中给出的教程。 http://plnkr.co/edit/grhag1P85teN4ftggkms?p=preview

这是包裹链接:https://github.com/mariuszfoltak/angular2-datatable

我想添加搜索过滤器,它在updateData函数中显示了这个错误。 类型“{}”上不存在属性“first_name”。是打字稿还是loadsh版本或其他什么问题?

export class UsersComponent implements OnInit {

    public users: any = [];
    public filteredData: any;
    public filterQuery = "";
    public rowsOnPage = 10;
    public sortBy = "first_name";
    public sortOrder = "asc";

    ngOnInit() {
        this.authService.getUsersList(userData).subscribe(data => {
            var res = data.response;
            this.users = this.users;
            this.filteredData = res.data;
        });
    }

    public updateData(query:string) {
        if(query) {
            this.filteredData = _.filter(this.users, (a)=>a.first_name.indexOf(query)>=0);
        } else {
            this.filteredData = this.users;
        }
    }
}

这是我的package.json文件,其中包含loadsh版本

"dependencies": {
  "angular2-datatable": "^0.6.0",
  "lodash": "^4.17.4",
},
"devDependencies": {

  "@types/lodash": "^4.14.50",
  "typescript": "~2.0.3"
}

1 个答案:

答案 0 :(得分:1)

我猜你的IDE中发生了这个错误(因此它是打字稿错误)所以你的users数组类型为any并且typescript无法检测我所在的类型中的first_name属性由于缺少指定类型的数组{},猜测lodash返回users。始终创建表示数据的类是最佳实践。类似的东西:

export class User {
    public first_name: string;
    /* And the rest of data which coming from your db */
}

/* in your component */
public users: Array<User> = [];

定义类将帮助您保持代码清洁和整理。如果您只是不想创建类,只需使用as语法并将其包装为( ),如下所示。

this.filteredData = _.filter(this.users, (a)=>(a as any).first_name.indexOf(query)>=0);

P.S如果你想使用type any,那么它的数组使用any[]Array<any>