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

Question

In my Angular-cli project I've this code implemented for datatable with search filter. I've used tutorial given in following link using loadsh. http://plnkr.co/edit/grhag1P85teN4ftggkms?p=preview

Here is package link: https://github.com/mariuszfoltak/angular2-datatable

I want to add search filter and it showed me this error in updateData function. Property 'first_name' does not exist on type '{}'. Is it problem with typescript or loadsh version or something else?

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;
        }
    }
}

Here is my package.json file with loadsh version

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

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

Answer 1

I guess this error occured in your IDE (so it's typescript error) so it's all about that your users array has type any and typescript can't detect first_name property in type which I'm guessing lodash returns as {} due to lack of specified type of array users . It's the best practise to always create class to represent data. Something like:

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

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

Defining class will help you with keep your code clean and organise. If you just don't want to create classes just use as syntax and wrap it with ( ) as shown below.

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

PS If you want to use type any and it's array use any[] or Array<any>