Angular 2 TypeScript, wie man ein Element in Array findet

Ich habe eine Komponente und einen Service:

Komponente:

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

Bedienung:

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

Ich möchte das Personenelement mit der ID ('personID') erhalten. Die PersonID, die ich von Routeparam bekomme. Dafür brauche ich die foreach-Schleife? Aber ich habe keine Lösung dafür gefunden.

Sie müssen folgende Methode anwenden Array.filter:

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

oder Array.find

this.persons =  this.personService.getPersons().find(x => x.id == this.personId);

Angenommen, ich habe unten Array:

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

Wenn wir Artikel mit Id = 1und erhalten möchten, Name = "oily skin"versuchen wir Folgendes:

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

Das Ergebnis gibt den SkinName "Fettige Haut" zurück.

Bitte probieren Sie es aus, danke und viel Respekt!

Transformieren Sie die Datenstruktur in eine Karte, wenn Sie diese Suche häufig verwenden

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

Eine nette Option, die noch nicht erwähnt wurde, ist die Kombination .findmit Pfeilfunktionen und Destrukturierung. Nehmen Sie dieses Beispiel aus 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 }

In TypeScript können Sie die native JS-Array-Methode filter () verwenden:

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

Es gibt ein Array mit nur übereinstimmenden Elementen aus dem ursprünglichen Array zurück (0, 1 oder mehr).

Referenz: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Verwenden Sie diesen Code in Ihrem Dienst:

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

Versuche dies

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

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