angular - 将多个对象从 observable 存储到 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"
  }
]

下面是我的类(class)。

UserDetails.ts

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

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

比如我要访问第二条数据的类

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

已编辑:我正在使用我的 api 服务来检索我的数据。

data: any;

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

Answer 1

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

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

当你收到你的数据时，只需将它输入到你的界面，在你的服务中你可以返回一个 Observable of UserDetails 数组，在你的组件中你可以拥有 类型的数组用户详细信息:

data: UserDetails[];

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

For example, i want to access the class of the second data. Using foreach() could be the solution, but how to access each data if i want to manipulate them?

是的，如果您需要以某种方式操作数据，您可以使用 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 设置一个 bool 值来切换用户的状态，并且您希望在发生这种情况时将 id 和状态发送到后端。

因此，首先，向您的界面添加一个 bool 值，我们称它为“状态”。因此，将以下属性添加到 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; 
  });
})

然后在您的模板中迭代用户，这里我是按照下面的方式完成的(缩短的代码)。你需要相应地调整你的代码，我从图片中看到你正在使用(或想要使用)开/关 slider :)

<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