Requête Anguar 2 de recherche de fil dans angular2-datatable - La propriété 'first_name' n'existe pas sur le type '{}'

Question

Dans mon projet Angular-cli j'ai implémenté ce code pour datatable avec filtre de recherche. J'ai utilisé le tutoriel donné dans le lien suivant en utilisant loadsh. http://plnkr.co/edit/grhag1P85teN4ftggkms?p=preview

Voici le lien du package: https://github.com/mariuszfoltak/angular2-datatable

Je veux ajouter le filtre de recherche et il m'a montré cette erreur dans la fonction updateData. La propriété 'prénom' n'existe pas sur le type '{}'. Est-ce un problème avec la version tapuscrit ou loadsh ou autre chose?

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

Voici mon fichier package.json avec la version loadsh

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

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

Answer 1

Je suppose que cette erreur est survenue dans votre IDE (il est donc erreur tapuscrit) donc il est tout au sujet que votre tableau users est de type any et le typecript ne peut pas détecter la propriété first_name dans le type que je devine que lodash renvoie {} en raison du manque de type de tableau spécifié users. Il est recommandé de toujours créer une classe pour représenter les données. Quelque chose comme:

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

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

Définir la classe vous aidera à garder votre code propre et organiser. Si vous ne voulez pas créer de classes, utilisez simplement la syntaxe as et ajoutez-la à () comme indiqué ci-dessous.

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

P.S Si vous souhaitez utiliser le type tout et il est utiliser le tableau any[] ou Array<any>