将多个对象从可观察对象存储到Angular2中的一个类中

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

改用接口，我认为这里不需要类 :) Whats the difference between "declare class" and "interface" in TypeScript

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

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

data: UserDetails[];

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

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

是的，如果您需要以某种方式处理您的数据，您可以使用forEach。在回调（订阅）中执行此操作，为什么需要这样做，是因为这是异步的。更多解释在这里：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 和状态发送到后端。

首先，在您的界面中添加一个布尔值，我们称之为“状态”。因此，将以下属性添加到status: boolean 到您的界面中。由于您的 api 似乎没有给出状态值，让我们迭代每个项目并在回调中添加该属性：

.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(....)   
}

Demo

Answer 2

怎么样：

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