web-dev-qa-db-fra.com

Angular 2 TypeScript comment rechercher un élément dans un tableau

J'ai un composant et un service:

Composant:

export class WebUserProfileViewComponent {
    persons: Person [];
    personId: number;
    constructor( params: RouteParams, private personService: PersonService) {
          
        
           this.personId = params.get('id');
           this.persons =  this. personService.getPersons();
           console.log(this.personId);  
        }
}

Un service:

@Injectable()
export class PersonService {
      getPersons(){
        var persons: Person[] = [
            {id: 1, firstName:'Hans', lastName:'Mustermann', email: '[email protected]', company:'Test', country:'DE'},
            {id: 2, firstName:'Muster', lastName:'Mustermann', email: '[email protected]', company:'test', country:'DE'},
            {id:3, firstName:'Thomas', lastName:'Mustermann', email: '[email protected]', company:'test', country:'DE'}
        ];
          
        return persons;
      }
}

Je veux obtenir l'élément de personne avec l'identifiant ('personID'). Le personID que je reçois de Routeparam. Pour cela j'ai besoin de la boucle foreach? Mais je n'ai pas trouvé de solution à cela.

Merci d'avance!

angularangular2-services
96
trap

Vous devez utiliser la méthode Array.filter :

_this.persons =  this.personService.getPersons().filter(x => x.id == this.personId)[0];
_

ou Array.find

_this.persons =  this.personService.getPersons().find(x => x.id == this.personId);
_
201
Andrei Zhytkevich

Supposons que j'ai un tableau ci-dessous:

Skins[
    {Id: 1, Name: "oily skin"}, 
    {Id: 2, Name: "dry skin"}
];

Si nous voulons obtenir un article avec Id = 1 et Name = "oily skin", nous allons essayer comme ci-dessous:

var skinName = skins.find(x=>x.Id == "1").Name;

Le résultat retournera que le nom de la peau est "peau grasse".

S'il vous plaît faire un essai, Merci et meilleure considération!

enter image description here

51
Hai Dinh

Transformez la structure de données en carte si vous utilisez fréquemment cette recherche

mapPersons: Map<number, Person>;

// prepare the map - call once or when person array change
populateMap() : void {
    this.mapPersons = new Map();
    for (let o of this.personService.getPersons()) this.mapPersons.set(o.id, o);
}
getPerson(id: number) : Person {
    return this.mapPersons.get(id);
}
7
rharari

à partir de TypeScript, vous pouvez utiliser la méthode native filter () du tableau JS:

let filteredElements=array.filter(element => element.field == filterValue);

il retourne un tableau avec seulement les éléments correspondants du tableau d'origine (0, 1 ou plus)

Référence: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

4
Luca C.

Utilisez ce code dans votre service:

return this.getReports(accessToken)
        .then(reports => reports.filter(report => report.id === id)[0]);
4
Anuj Shaubhari