Angular 2 TypeScript如何在数组中查找元素

Question

我有一个组件和一个服务：

Component:

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: '[e-mail]', company:'Test', country:'DE'},
            {id: 2, firstName:'Muster', lastName:'Mustermann', email: '[e-mail]', company:'test', country:'DE'},
            {id:3, firstName:'Thomas', lastName:'Mustermann', email: '[e-mail]', company:'test', country:'DE'}
        ];
          
        return persons;
      }
}

我想获取具有ID（'personID'）的个人项目。 personID是从中获取的。为此，我需要使用foreach循环吗？但是我还没有找到解决方案。

- trap

---

你可以按Id查找元素，就像这样：persons.find(person => person.id === personId) - user5856396

可能是在JavaScript对象数组中查找ID对象的重复项。 - Igor

尝试始终在ngOninit方法生命周期钩子中获取数据，而不是构造函数，并尝试使用可观察的静态数据。 - Rebai Ahmed

Answer 1

你需要使用方法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);

- Andrei Zhytkevich

---

@SaravananNandhan，方法this.personService.getPersons()返回undefined。 - Andrei Zhytkevich

@AndreiZhytkevich 不应该使用三个等号吗？ - antonioplacerda

@antonioplacerda，没问题。然而，对于这个问题来说并不是太重要。 - Andrei Zhytkevich

起初，这段代码对我来说似乎很神秘，但是阅读“find(x => x.id == this.personId”作为“查找x，其中x的id等于此人的id”可能会有所帮助。我不知道其他人怎么想，但对我来说，这更容易记住。 - Rizki Hadiaturrasyid

Answer 2

假设我有以下数组：

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为“油性皮肤”。

- Hai Dinh

---

谢谢您提供这段代码片段，它可能会在短期内提供一些有限的帮助。一个适当的解释会大大提高这个解决方案的长期价值，因为它会展示为什么这是一个好的解决方案，并且使它对未来具有类似问题的读者更加有用。请编辑您的答案，添加一些解释，包括您所做的假设。 - Toby Speight

你如何处理一个初始为空，然后动态填充的数组？好像在编译时出了问题...例如，属性Id变成未知。 - rey_coder

你好 @rey_coder，我认为在实现获取数组元素项之前，我们应该检查一下数组是否为空。像这样：testArray = []; testArrayItem = testArray.length>0? testArray.find(x=>x.Id== 1).Name: 'testArray null'; console.log(testArrayItem); - Hai Dinh

嗨@hai-dinh，问题已解决。谢谢。 - rey_coder

Answer 3

您可以结合箭头函数和解构使用.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 }

- Nathan Beck

Answer 4

如果您经常使用此搜索功能，请将数据结构转换为地图

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

- rharari

Answer 5

从TypeScript中，您可以使用原生的JS数组filter()方法：

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

它返回一个数组，该数组仅包含从原始数组中匹配的元素（0、1或更多个）。

参考： https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

- Luca C.

Answer 6

在您的服务中使用以下代码：

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

- Anuj Shaubhari