Angular 2 TypeScript como encontrar elemento na matriz


131

Eu tenho um componente e um serviço:

Componente:

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

Serviço:

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

Quero obter o item da pessoa com o ID ('personID'). O personID que recebo do Routeparam. Para isso eu preciso do loop foreach? Mas não encontrei uma solução para isso.


11
Você pode encontrar um elemento por id como este persons.find (pessoa => person.id === personId)
tstellfe

Respostas:


255

Você precisa usar o método 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);

2
@SaravananNandhan, método this.personService.getPersons()retorna #undefined
Andrei Zhytkevich

4
@AndreiZhytkevich não devemos usar iguais a triplos?
Antonioplacerda

@antonioplacerda, sim, isso serve. No entanto, para esta questão, não é muito importante.
Andrei Zhytkevich 7/04

1
No começo, esse código parece enigmático para mim, mas pode ajudar a ler "find (x => x.id == this.personId" como "find x, onde x é igual a id dessa pessoa" Eu não conheço outras as pessoas, mas para mim isso é muito mais fácil de lembrar.
Rizki Hadiaturrasyid

69

Suponha que eu tenho abaixo da matriz:

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

Se queremos obter o item com Id = 1e Name = "oily skin", tentaremos o seguinte:

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

O resultado retornará o nome da pele é "Pele oleosa".

Por favor, tente, obrigado e melhor consideração!

insira a descrição da imagem aqui


4
Obrigado por este snippet de código, que pode fornecer ajuda limitada a curto prazo. Uma explicação adequada melhoraria bastante seu valor a longo prazo, mostrando por que essa é uma boa solução para o problema e a tornaria mais útil para futuros leitores com outras perguntas semelhantes. Por favor edite sua resposta para adicionar alguma explicação, incluindo as suposições que você fez.
precisa

1
Como você faria isso para uma matriz inicialmente vazia e preenchida dinamicamente ... parece haver um problema ao compilar .... a propriedade, por exemplo, Id se torna desconhecida.
21138 rey_coder

Olá @rey_coder, acho que devemos fazer uma verificação se o array não for nulo antes de implementarmos para obter os itens de elemento do array. Como: testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1). Nome: 'testArray null'; console.log (testArrayItem);
Hai Dinh

1
Oi @ hai-dinh, Isso resolveu o problema. Obrigado.
rey_coder

9

Transforme a estrutura de dados em um mapa, se você usa frequentemente essa pesquisa

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

8

Uma opção interessante ainda não mencionada é usar combinar .findcom funções de seta e desestruturação. Veja este exemplo do 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 }


4

Use este código em seu serviço:

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

1

Tente isto

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

      console.log('Description : ', val );
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.