在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

嘗試使用以下代碼片段：

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

Answer 2

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