Angular 2 TypeScript วิธีค้นหาองค์ประกอบใน Array

ฉันมีส่วนประกอบและบริการ:

ส่วนประกอบคือ:

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

ฉันต้องการรับรายการบุคคลที่มีรหัส ('personID') ID บุคคลที่ฉันได้รับจาก Routeparam ฉันต้องการ foreach loop หรือไม่? แต่ฉันยังไม่พบวิธีแก้ปัญหานี้

คุณต้องใช้วิธีการ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);

สมมติว่าฉันมีอาร์เรย์ด้านล่าง:

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 คือ "ผิวมัน"

โปรดลองใช้ขอบคุณและเคารพ!

แปลงโครงสร้างข้อมูลเป็นแผนที่หากคุณใช้การค้นหานี้บ่อยครั้ง

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

ตัวเลือกที่ยังไม่ได้กล่าวถึงคือการใช้ร่วม.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 }

จาก TypeScript คุณสามารถใช้วิธีการกรองอาร์เรย์ JS ดั้งเดิม ():

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

ส่งคืนอาร์เรย์ที่มีเฉพาะองค์ประกอบที่ตรงกันจากอาร์เรย์เดิม (0, 1 หรือมากกว่า)

อ้างอิง: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

ใช้รหัสนี้ในบริการของคุณ:

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

ลองทำตามนี้

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

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