Question

假设我有两个REST服务：

todo.service.ts
user.service.ts

这是每个对象的定义：

todo: userId, title, id, completed
user: id, name, email, etc

我的服务都使我可以通过定义的集合进行观察。

users: Observable<User[]>
todos: Observable<Todo[]>

最终结果是显示如下内容：

todo.title by user.name

最好的方法是什么？是将它们映射到单个对象，如：

todo: id, title, completed, user { id, name, email, etc }

还是有更好的方法来存档？

谢谢！

Answer 1

我发现您的实现有些奇怪之处，所以我只是更改了它们，我将进行解释。

在服务内部，应该创建一个函数来返回可观察的对象，而不是在构造函数中执行此操作，这样，您可以始终延迟获取数据或使用相同的函数进行刷新。这样（其他服务相同的更改）：

@Injectable()
export class UserService {

  private API = 'https://jsonplaceholder.typicode.com/users';

  constructor(private httpClient: HttpClient) { }

  getUsers() {
    return this.httpClient.get(this.API);
  }
}

然后在组件内部，创建2个列表，您可以使用promise进行手动更新，或者订阅可观察对象（如有更改）。

export class AppComponent {
  name = 'Angular';
  todos:[];
  users:[];

  constructor(
    private todoService: TodoService,
    private userService: UserService
  ) {
    this.getUsers();
    this.getTodos();
  }

  getTodos() {
    // promise so fetch only once
    this.todoService.getToDos().toPromise().then(todos => {
      this.todos = todos;
    });
  }

  getUsers() {
    // promise so fetch only once
    this.userService.getUsers().toPromise().then(users => {
      this.users = users;
    });
  }

  getUsername(id) {
    if (this.users && this.users.length > 0) {
      return this.users.find(user => {
        return user.id === id;
      }).name;
    }
  }
}

还有html：

<h3>Users</h3>
<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

<h3>Todos</h3>
<ul>
  <li *ngFor="let todo of todos">{{ todo.title }} ({{ getUsername(todo.userId) }})</li>
</ul>

这给了我以下输出：

用户

Leanne Graham
Ervin Howell
Clementine Bauch
Patricia Lebsack
切尔西·迪特里希（chelsey Dietrich）
太太丹尼斯·舒利斯特
Kurtis Weissnat
尼古拉斯·鲁诺夫斯多蒂尔五世
Glenna Reichert
Clementina DuBuque

Todos

恋爱中的自由（Leanne Graham）
法西斯法律基金会（Leanne Graham）
fugiat veniam minus（Leanne Graham）
et porro tempora（Leanne Graham）
laboriosam mollitia et enim quadi adipisci quia Provident illum（Leanne Graham）
基乌拉姆（qui ullam）属基布斯巴达（quibusom）魁北克（Leanne Graham）
illo expedita结果性问题

等

最好的方法是什么？是将它们映射到单个对象，例如

我不会这样做，因为可以更改一个列表，而另一个列表保持不变，因此可以选择单独维护它们。

可观察到的JSON加入ID

1 个答案: