时间戳

首页 > 解决方案 > Angular6：如何将模板变量链接到服务的数组，索引在 paramMap

angular - Angular6：如何将模板变量链接到服务的数组，索引在 paramMap

问题描述

这个问题更多的是关于设计问题，而不是解决特定错误。

无论我如何尝试这样做，我都会遇到此错误：

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[]in Account.service，我不想在（我应该吗？）中初始化一个Account变量。Account.service

我希望Account.component 模板通过使用从observable推导出的组件变量直接引用Account[]in的索引。Account.serviceaccountIndexparamMap

第一个问题：这有意义还是我应该以不同的方式对待它？

在Account.component我不需要存储任何信息的情况下，整个模板直接绑定到Account.service(ie <li *ngFor="let account of accountService.accounts">{{ account.name }}</li>) 并且工作正常。我正在考虑对 like 做同样的事情AccountDetail.component）{{ accountService.accounts[accountIndex].name }}。

这样，如果任何组件更改了帐户，所有其他显示它们的组件都会自动更新（这是实现此目的的正确方法吗？）。

总结一下：我希望我的所有数据都存储在服务中（只有特定的过滤参数与上下文相关的参数存储在组件中），并且我希望在 Account.component 初始化期间创建大部分数据，以便导航尽可能快可能的。

我应该如何设计这个？

感谢阅读，如果有人愿意在这个主题上帮助我，我可以在需要时尝试提供一个 plunker（这个问题是关于设计的，我更喜欢设计建议而不是我可能不完全理解的代码示例）。

标签： angularservice

解决方案

第一个问题：这有意义还是我应该以不同的方式对待它？1) 即使您不需要使用这些信息，最好不要直接在组件视图中使用服务变量。2）我建议不要在路由参数中发送索引，而是通过父子组件之间的数据共享来实现目标。

我应该如何设计这个？您应该创建一个服务和两个组件来执行此操作。服务会将数据传递给父组件，父组件将显示所有帐户的列表。然后，此列表的项目应绑定属性以将帐户传递给子组件。您可以参考一些关于父子组件之间数据共享的优秀博客/角度指南，以获取有关该主题的更多详细信息。例如： https ://angular.io/guide/component-interaction https://ciphertrick.com/2017/07/24/parent-child-component-communication-angular/

为与路由参数共享数据而编辑：accounts 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;
    });
  }

推荐阅读