Angular 2 TypeScript comment trouver 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 souhaite obtenir l'élément de personne avec l'identifiant ('personID'). Le personID que j'obtiens de Routeparam. Pour cela, j'ai besoin de la boucle foreach? Mais je n'ai pas trouvé de solution pour cela.

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

Supposons que j'ai le tableau ci-dessous:

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

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

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

Le résultat renverra le skinName est "Peau grasse".

S'il vous plaît, essayez, merci et meilleures salutations!

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

Une option intéressante non encore mentionnée est d'utiliser combiner .findavec les fonctions fléchées et la déstructuration. Prenons cet exemple de MDN .

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

const result = inventory.find( ({ name }) => name === 'cherries' );

console.log(result) // { name: 'cherries', quantity: 5 }

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

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

il renvoie un tableau avec uniquement 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

Utilisez ce code dans votre service:

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

Essaye ça

          let val = this.SurveysList.filter(xi => {
        if (xi.id == parseInt(this.apiId ? '0' : this.apiId))
          return xi.Description;
      })

      console.log('Description : ', val );