Question

我现在在Angular2应用程序中遇到了一些麻烦。我从我的服务中检索了多个对象，因此我想将它们存储到自己的类中。

我知道如何将一个对象放到一个类中，但是如果有多个对象，如何解决它？

我的对象

[
  {
    "_key": "2343200",
    "_id": "test/2343200",
    "_rev": "_U9JHQXa---",
    "age": 10,
    "name": "Soy"
  },
  {
    "_key": "2342008",
    "_id": "test/2342008",
    "_rev": "_U9JGn0----",
    "age": 20,
    "name": "John"
  },
  {
    "_key": "2342955",
    "_id": "test/2342955",
    "_rev": "_U9JG46u---",
    "age": 32,
    "name": "Jane"
  }
]

以下是我的课程。

UserDetails.ts

export class UserDetails {
    key: string;
    id: string;
    name: string;
    age: number;
}

使用foreach()可能是解决方案，但如果我想操作它们，如何访问每个数据？

例如，我想访问第二个数据的类。

感谢任何形式的帮助！我提前谢谢你。

编辑：即时通讯使用我的apiservice来检索我的数据。

data: any;

this.apiService.getUsers().subscribe(users=> {
            this.data = users;
        })

Answer 1

怎么样：

let jsonArray: IUserDetails[] = [
    ....
];

interface IUserDetails {
    _key: string;
    _id: string;
    _rev: string;
    name: string;
    age: number;
}

class UserDetails {
    key: string;
    id: string;
    name: string;
    age: number;

    constructor(data: IUserDetails) {
        this.key = data._key;
        this.id = data._id;
        this.name = data.name;
        this.age = data.age;
    }
}

const instances: UserDetails[] = jsonArray.map(obj => new UserDetails(obj));
console.log(instances[1]); // UserDetails {key: "2342008", id: "test/2342008", name: "John", age: 20}

（code in playground）

修改

根据您的评论和对问题的修改，您需要在subscribe处理程序中执行相同的操作：

data: UserDetails[];

this.apiService.getUsers().subscribe(users => {
    this.data = users.map(obj => new UserDetails(obj));
})

Answer 2

使用接口代替，我认为这里不需要课程:) Whats the difference between "declare class" and "interface" in TypeScript

export interface UserDetails {
    key: string;
    id: string;
    age: number;
    name: string;
}

当您收到数据时，只需将其输入您的界面，在您的服务中，您可以返回一个Observable of UserDetails数组，并且在您的组件中，您可以拥有UserDetails类型的数组：

data: UserDetails[];

this.apiService.getUsers().subscribe(users=> {
    this.data = users;
})

例如，我想访问第二个数据的类。使用foreach()可能是解决方案，但如果我想操作它们，如何访问每个数据？

是的，如果您需要以某种方式操纵数据，则可以使用forEach。在回调（subscribe）中执行此操作，为什么需要这样做，因为这是异步的。这里有更多解释：How do I return the response from an Observable/http/async call in angular2?

this.apiService.getUsers().subscribe(users=> {
    this.data = users;
    this.data.forEach(user => {
       console.log(user) 
       // do something!
    })
})

编辑：

我们获得了更多信息，您需要一个布尔值来UserDetails来切换用户的状态，并且您希望在发生这种情况时将ID和状态发送到后端。

首先，在你的界面添加一个布尔值，让它调用它＆＃34; status＆＃34;。因此，将以下属性添加到您的界面status: boolean。既然您似乎没有给出状态值，那么让我们迭代每个项目并在回调中添加该属性：

.subscribe(data => {
  this.data = data;
  this.data.forEach(x => {
    // set initial value to true or false, depending what you want
    x.status = true; 
  });
})

然后迭代模板中的用户，这里我已经完成了以下（缩短的代码）。您需要相应地调整代码，我从图片中看到您正在使用（或想要使用）开/关滑块：）

<table>
  <tr *ngFor="let user of data">
    <td>{{user.name}}</td>
    <td>{{user.status}}</td>
    <td><button (click)="toggleStatus(user)">Toggle Status</button></td>
  </tr>
</table>

然后是你的toggleStatus：

toggleStatus(user: UserDetails) {
  user.status = !user.status

  // modify to your actual code
  this.service.sendUser(user.id, user.status)
    .subscribe(....)   
}

将多个对象从observable存储到Angular2中的类中

2 个答案:

修改

编辑：

Demo