Question

我想在世界“ USER”后面加上从服务器收到的每个名称，并将其显示在Angular中。

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

[
  {
    "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);
    });

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

2 个答案: