Angular 2 TypeScript如何在Array中查找元素

tra*_*rap 105 angular2-services angular

我有一个组件和服务:

零件:

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);  
        }
}
Run Code Online (Sandbox Code Playgroud)

服务:

@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;
      }
}
Run Code Online (Sandbox Code Playgroud)

我想获得带有Id('personID')的Person Item.我从Routeparam获得的personID.为此,我需要foreach循环?但我还没有找到解决方案.

提前致谢!

And*_*ich 215

你需要使用方法Array.filter:

this.persons =  this.personService.getPersons().filter(x => x.id == this.personId)[0];
Run Code Online (Sandbox Code Playgroud)

要么 Array.find

this.persons =  this.personService.getPersons().find(x => x.id == this.personId);
Run Code Online (Sandbox Code Playgroud)

  • @SaravananNandhan,方法`this.personService.getPersons()` 返回`undefined` (3认同)
  • @AndreiZhytkevich我们不应该使用三重等于吗? (3认同)
  • 起初,该代码对我来说似乎很神秘,但它可能有助于将“find(x => x.id == this.personId”读作“find x, where x's id equals this person id”我不知道其他人们,但对我来说,这更容易记住。 (2认同)

Hai*_*inh 55

假设我有以下数组:

Skins[
    {Id: 1, Name: "oily skin"}, 
    {Id: 2, Name: "dry skin"}
];
Run Code Online (Sandbox Code Playgroud)

如果我们想获得项目Id = 1Name = "oily skin",我们会尽力如下:

var skinName = skins.find(x=>x.Id == "1").Name;
Run Code Online (Sandbox Code Playgroud)

结果将返回skinName为"Oily skin".

请试一试,谢谢你,最好的关注!

在此输入图像描述

  • 感谢您提供此代码段,这可能会提供一些有限的短期帮助.一个正确的解释[将极大地改善](// meta.stackexchange.com/q/114762)它的长期价值通过显示*为什么*这是一个很好的解决问题的方法,并将使它对未来的读者更有用其他类似的问题.请[编辑]你的答案,添加一些解释,包括你所做的假设. (3认同)

Nat*_*eck 12

你可以结合.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 }
Run Code Online (Sandbox Code Playgroud)


rha*_*ari 7

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

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);
}
Run Code Online (Sandbox Code Playgroud)


小智 5

在您的服务中使用此代码:

return this.getReports(accessToken)
        .then(reports => reports.filter(report => report.id === id)[0]);
Run Code Online (Sandbox Code Playgroud)


Luc*_* C. 5

从TypeScript中,您可以使用本机JS数组filter()方法:

let filteredElements=array.filter(element => element.field == filterValue);
Run Code Online (Sandbox Code Playgroud)

它返回一个仅包含原始数组中匹配元素的数组(0、1或更多)

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