Angular 2 TypeScript 배열에서 요소를 찾는 방법


131

구성 요소와 서비스가 있습니다.

구성 요소:

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

서비스:

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

Id ( 'personID')로 개인 항목을 가져오고 싶습니다. 내가 Routeparam에서 얻은 personID. 이를 위해 foreach 루프가 필요합니까? 그러나 나는 이것에 대한 해결책을 찾지 못했습니다.


11
이 persons.find 같은 ID로 요소 (사람 => person.id === personId) 찾을 수 있습니다
tstellfe

답변:


255

사용 방법 Array.filter:

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

또는 Array.find

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

2
@SaravananNandhan, 메소드의 this.personService.getPersons()반환undefined
안드레이 Zhytkevich

4
@AndreiZhytkevich는 트리플 등호를 사용하면 안됩니까?
antonioplacerda

@antonioplacerda, 예, 그렇게 할 것입니다. 그러나이 질문에 대해서는 그다지 중요하지 않습니다.
Andrei Zhytkevich

1
처음에는 그 코드가 난해 해 보이지만 "find (x => x.id == this.personId"를 "find x, 여기서 x의 ID가이 사람 ID와 같음"으로 읽는 것이 도움이 될 수 있습니다. 사람들은,하지만 나를 위해이 기억하는 것이 훨씬 쉽다.
리즈 키 Hadiaturrasyid

69

아래 배열이 있다고 가정합니다.

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

Id = 1및로 항목을 얻으려면 다음 과 Name = "oily skin"같이 시도합니다.

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

결과는 skinName이 "Oily skin"임을 반환합니다.

시도해주세요, 감사합니다.

여기에 이미지 설명 입력


4
제한된 단기 도움을 제공 할 수있는이 코드 스 니펫에 감사드립니다. 적절한 설명 이것이 문제에 대한 좋은 해결책 인 이유 를 보여줌으로써 장기적인 가치를 크게 향상시키고 다른 유사한 질문을 가진 미래의 독자에게 더 유용하게 만들 것입니다. 제발 편집 당신이 만든 가정 등 일부 설명을 추가 할 답변을.
Toby Speight 2018 년

1
처음에는 비어 있고 동적으로 채워지는 배열에 대해이 작업을 수행하는 방법 ... 컴파일하는 동안 문제가있는 것 같습니다 .... 속성 (예 : Id)을 알 수 없게됩니다.
rey_coder

안녕하세요 @rey_coder, 배열의 요소 항목을 가져 오기 위해 구현하기 전에 배열이 null이 아닌지 확인해야한다고 생각합니다. 좋아요 : testArray = []; testArrayItem = testArray.length> 0? testArray.find (x => x.Id == 1) .Name : 'testArray null'; console.log (testArrayItem);
Hai Dinh

1
안녕하세요 @ hai-dinh, 그게 문제를 분류했습니다. 감사.
rey_coder

9

이 검색을 자주 사용하는 경우 데이터 구조를지도로 변환

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

아직 언급되지 않은 깔끔한 옵션은 .find화살표 기능과 결합 및 구조 분해 를 사용하는 것 입니다. 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

서비스에서 다음 코드를 사용하십시오.

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

1

이 시도

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

      console.log('Description : ', val );
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.