Наблюдаемый JSON присоединиться к ID

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 списка, которые можно обновить вручную с помощью обещания или подписаться на наблюдаемое, если оно может быть изменено.

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>

Это дает мне следующий вывод:

Пользователи

• Линн Грэм
• Эрвин Хауэлл
• Клементина Бауч
• Патрисия Лебсак
• Челси Дитрих
• Миссис.Деннис Шулист
• Куртис Вайснат
• Николас Рунольфсдоттир V
• Гленна Райхерт
• Клементина ДюБук

Тодос

• delectus aut autem (Линн Грэм)
• quis ut nam facilis et officia qui (Линн Грэм)
• fugiat veniam минус (Leanne Graham)
• et porro tempora(Линн Грэм)
• labourisam mollitia et enim quasi adipisci quia Обеспечивающее иллюзию (Leanne Graham)
• qui ullam ratione quibusdam coeptatem quia omnis (Leanne Graham)
• illo expedita consequatur quatв (Линн Грэм)

и т. д.

Каков наилучший способ сделать это?Разве для сопоставления их с одним единичным объектом, например

, я бы этого не делал, потому что 1 список можно изменить, в то время как другой остается прежним, преимущество заключается в том, чтобы иметь возможность поддерживать их индивидуально.