可观察的 json 加入 id

Question

假设我有两个 REST 服务：

todo.service.ts
user.service.ts

这是每个对象的定义：

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

我的两个服务都返回给我 Observable 以及定义的集合。

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

最终结果是这样显示的：

todo.title by user.name

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

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

或者有更好的存档方法吗？

谢谢！

Answer 1

我发现你的实现有些地方有点奇怪，所以我只是改变了它们，我会解释一下。

在你的服务中，你应该创建一个函数来返回 observable 而不是在你的构造函数中这样做，这样你总是可以延迟获取数据，或者使用相同的函数刷新。像这样（其他服务相同的变化）：

@Injectable()
export class UserService {

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

  constructor(private httpClient: HttpClient) { }

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

然后在组件内部，创建 2 个列表，您可以使用 Promise 手动更新它们，或者订阅一个 observable（如果它可能发生变化）。

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>

这给了我以下输出：

用户

• 莉安·格雷厄姆
• 欧文·豪威尔
• 克莱门汀·鲍赫
• 帕特里夏·莱布萨克
• 切尔西·迪特里希
• 夫人丹尼斯舒利斯特
• 库尔蒂斯·魏斯纳特
• Nicholas Runolfsdottir V
• 格伦娜·赖克特
• 克莱门蒂娜·杜布克

待办事项

• delectus aut autem (Leanne Graham)
• quis ut nam facilis et officia qui (Leanne Graham)
• fugiat veniam minus (Leanne Graham)
• et porro tempora (Leanne Graham)
• laboriosam mollitia et enim quasi adipisci quia provident illum (Leanne Graham)
• qui ullam ratione quibusdam voluptatem quia omnis (Leanne Graham)
• illo expedita consequatur quia in (Leanne Graham)

等等

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

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