Angular6: как связать переменные шаблона с массивом службы, когда индекс находится в paramMap

Question

Этот вопрос больше касается вопросов проектирования, чем решения конкретной ошибки.

Независимо от того, как я пытаюсь это сделать, у меня есть эта ошибка:

ERROR TypeError: "_co.accountService.accounts[_co.accountIndex] is undefined"

ИЛИ (потому что я пытался использовать переменную loading, которая скрывает шаблон, пока маршрут paramMap ничего не отправлял):

Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'

У меня есть Account.service, который используетсяAccount.component для отображения списка учетных записей, поэтому при инициализации Account[] сохраняется в Account.service.

Когда я нажимаю на одну из этих учетных записей, я меняю маршрут на account/1 дляпример, который отображается на AccountDetail.component.У меня уже есть заполненное поле Account[] в Account.service, и я не хочу инициализировать переменную Account в Account.service (не так ли?).

Я хотел бы Account.component template для прямой ссылки на индекс Account[] в Account.service с помощью компонентной переменной accountIndex, которая выводится из наблюдаемой paramMap.

Первый вопрос:это имеет смысл или я должен относиться к этому по-другому?

В Account.component мне не нужно хранить какую-либо информацию, весь шаблон напрямую связан с Account.service (то есть <li *ngFor="let account of accountService.accounts">{{ account.name }}</li>) и работает нормально.Я думаю сделать то же самое с AccountDetail.component, как {{ accountService.accounts[accountIndex].name }}).

Таким образом, если какой-либо компонент изменяет учетную запись, все остальные, отображающие их, автоматически обновляются (это правильный путь для достижения этой цели?).

Подводя итог : я хочу, чтобы все мои данные хранились в сервисах (только с конкретными параметрами фильтрации, которые контекстуально хранятся в компонентах), и я хочу, чтобы большинство из нихбыть создан во время инициализации Account.component, чтобы навигация была максимально быстрой.

Как мне сконструировать это?

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

Answer 1

Похоже, вы на правильном пути.Пока «Учетная запись» не означает частную учетную запись, в которую пользователь должен войти.

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

Как видно из приложения hero, в сервисе можно использовать два отдельных метода.Один, getAccounts(){}, для вызова всех учетных записей.И два, getAccount(id) для вызова одной конкретной учетной записи.

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

Вы также можете посмотреть на взаимодействие компонентов.Хранение учетной записи в родительском компоненте и передача ее дочерним компонентам по мере необходимости.

Информация о взаимодействии между родителями и дочерними объектами может быть найдена здесь: https://angular.io/guide/component-interaction, и она может выглядеть примерно так:

Account-Parent.component.html:
<account-child [selectedAccountChild]="selectedAccount"></account-child>

Account-Parent.component.ts:
selectedAccount: Account; //connect to http-service to get the selected account

Account-child.component.ts:
@Input() selectedAccountChild: Account;

Answer 2

Первый вопрос: имеет ли это смысл или я должен относиться к этому по-другому?1) Даже если вам не нужно использовать эту информацию, рекомендуется не использовать служебную переменную непосредственно в представлении компонента.2) Вместо того, чтобы отправлять индекс в параметре маршрута, я бы порекомендовал достичь цели с помощью обмена данными между родительскими и дочерними компонентами.

Как мне спроектировать это?Вы должны создать сервис и два компонента для этого.Сервис передаст данные родительскому компоненту, который покажет список всех учетных записей.Затем элементы этого списка должны связать свойство для передачи учетной записи дочернему компоненту.Вы можете обратиться к некоторым хорошим блогам / угловому руководству по обмену данными между родительским и дочерним компонентами для получения более подробной информации по этой темеНапример: https://angular.io/guide/component-interaction https://ciphertrick.com/2017/07/24/parent-child-component-communication-angular/

Отредактировано для совместного использования данных с параметрами маршрута: учетные записи init:

this.appService.accountsUpdated
.subscribe(
  (data: any) => {
  this.accounts = data;
});

учетные записи html:

   <a routerLink="/account/{{account.id}}">{{account.name}}</a>

Реквизиты счета:

  ngOnInit() {
    this.activatedRoute.params.subscribe((param:any) => {
      this.account = this.appService.getAccountWithID(param.id)[0];
    });
  }

Услуга:

  getAccountWithID(id: number) {
    return this.accounts.filter(acc => {
      return acc.id == id;
    });
  }