Question

我是angular2中的新手，我想循环键并将user_id更改为用户名。这是user.component.ts的代码。作为回应，我得到这样的结论：[{＆＃34; 1＆＃34;：＆＃34; Begginer，professional，＆＃34;}，{＆＃34; 2＆＃34;：＆＃34; Begginer＆＃34 ;}，{＆＃34; 4＆＃34;：＆＃34;专业，新人＆＃34;}]，我希望将其显示为：

Begginer，专业

B Begineer

C专业，更新鲜

A B C是用户名。

this.userCategories = response;
console.log(JSON.stringify(this.userCategories)); //[{"1":"Begginer ,professional ,"},{"2":"Begginer"},{"4":"Professional, freshers"}]
this.userCategories =  this.userCategories.map( i => {
  let user = [];
  let usr = [];
  const User_id = Object.keys(i)[0]; // here I am getting user_id
  for(let j of User_id){
    this.userService.userName(j).subscribe(
     name => {
       usr.push(name); // pushing name of users in an array.
       return usr;
     },
     err => {
       console.log('err:', err);
     }
    );
  }
  user[0] = usr;
  console.log(user[0]); // here I am getting username in an array.
  user[1] = i[User_id];
  return user;
})

然后考虑当我这样使用时：

<a >{{userCategories[0] | json}}</b>
<a >{{userCategories[1]}}</a>

我得到了：

  [ "\"A \"" ] Begineers,professional
  [ "\"B \"" ] Begineers
  [ "\"C \"" ] Professional,fresher

有谁可以帮助我。提前谢谢。

Answer 1

尝试类似的事情： -

let response = [{ "1": "Begineer ,professional ," }, { "2": "Begineer" }, { "4": "Professional, freshers" }];  //JSON Array  [{"1":"Begineer ,professional ,"},{"2":"Begineer"},{"4":"Professional, freshers"}]
/**
 * Please make sure map always return array
 * map() method creates a new array with the results of calling a function for every array element.
 * 
 * And your parsing as Object {"A" : "Begineer,professional"}
 * 
 * to make it as Object use it as
 */
response.map((value, key) => {
    //Get UserName By UserID Function 
    let userId = Object.keys(value)[0];
    this._service.username(userId).subscribe(name => {
        this.userCategories.push({key : name , username : value[userId]}) ;
    })
})

由于* ngFor适用于数组，我已将其转换为数组..

请将您的观点更新为： -

<div *ngFor="let user of userCategories">
        <p>
                <a>{{user.key}}</a>
                <a>{{user.username}}</a>
        </p>
</div>

在angular2

1 个答案: