如何在订阅时进行foreach

Question

我正在尝试遍历一个可观察对象，但它说未定义。为什么会这样。

这是我的API回复

[
  {
    "id": 5,
    "name": "Ram",
    "description": "desc",
    "active": false
  },
  {
    "id": 4,
    "name": "Ram",
    "description": "desc",
    "active": false
  },
  ]

但我想像这样过滤它

 this.model.users = [
      {uId: 1, uNAme: Ram},
    ];

因此，为了实现这一点，我需要循环遍历我的订阅，但它说未定义

 export class TestComponent implements OnInit {
    usersArray: User[];
   response: any;

    constructor(private service: MyService) {
    this.service.get(this.requestModel).subscribe(users => this.response = users);
     this.response.forEach(element => {
    this.usersArray.push({
      uId: element.id,
      uNAme: element.name
    });
   });

      this.model.users = this.usersArray;
    }

型号

 export class User {
     public uId: number;
     public uNAme: string;
 }

服务：

get(requestSearch: ProjectRequest): Observable<any> {
  return this.http.post<any>(this.projectUrl, requestSearch,  httpOptions);
}

Answer 1

像下面这样更改您的服务调用，希望它能起作用。

export class TestComponent implements OnInit {
usersArray: User[];
response: any;

constructor(private service: MyService) {
    this.service.get(this.requestModel).subscribe((data: any) => {
        this.response = data;

        this.response.forEach(element => {
            this.usersArray.push({
             uId: element.id,
             uNAme: element.name
            });
        }); 
    }
    this.model.users = this.usersArray;
}
}

Answer 2

好的，所以你的问题是你的运行在你得到回复之前就回复了因为你使用 observable 你的应用程序继续运行而不是不停在订阅。

你能做的基本上是这样的：

 export class TestComponent implements OnInit {
    usersArray: User[];
   response: any;

    constructor(private service: MyService) {
    this.service.get(this.requestModel).subscribe(users =>{
     this.response = users;
     this.response.forEach(element => {
        this.usersArray.push({
        uId: element.id,
        uNAme: element.name
    });
   });
  }

    );
      this.model.users = this.usersArray;
    }

但我会考虑使用 filter() 而不是使用 foreach。 //不是个好主意。

好了，看完以后，你所要做的就是像这样使用Map()函数：

this.service.get(this.requestModel).subscribe(users =>{
  this.response = users.map((user)=>{
    return {uId:user.id, uNAme: user.name}
  })
}

祝你好运，享受:)

如何在订阅时进行foreach

How to foreach on subscribe

subscribe

angular6

angular7