使用Angular中的Map运算符变换对象

Question

我想用我从服务器收到的每个名字追加世界“USER”并在Angular中显示它。

我有以下json将从我的API返回。

[
  {
    "id": "1",
    "name": "ABC",
    "IsActive": "Yes"
  },
  {
    "id": "2",
    "name": "XYZ",
    "IsActive": "Yes"
  },
  ...
]

模型界面如下：

export interface model {
  id: string;
  name: string;
  routerLink: string;
} 

使用以下函数调用api。

getUser() {
  return this.HttpC.get<model>("http://localhost:4200/assets/testingdata/user.json");
}

我的Component.ts如下

...
constructor(private serv: AuthService) {}

ngOnInit() {
  this.serv.getUser()
    .pipe(
      map(x => "User " + x.name)
    )
    .subscribe((m) => {
      console.log(m);
    })
}

在控制台输出中，我得到的结果为：

**User Undefined** 

并且只返回单行

我的期望是接收用户ABC用户XYZ等数据

Answer 1

    const test = of([
        {
            'id': '1',
            'name': 'ABC',
            'IsActive': 'Yes'
        },
        {
            'id': '2',
            'name': 'XYZ',
            'IsActive': 'Yes'
        }
    ]);

    test.subscribe(users => {
        users.forEach(user => {
            user.name = 'User ' + user.name;
        });
        console.log(users);
    });

Answer 2

尝试使用下面的代码段：

constructor(private serv:AuthService){}
ngOnInit()
  {
	this.serv.getUser()
     .pipe(
       map( users => {
        return users.map(user => {
				user.name = `User ${user.name}`;
				return user;
        };
		})
       )
     .subscribe( (m)=>{
       console.log(m);
      })
}