Angular 5 ngfor 同时让两个变量答案

【问题标题】：Angular 5 ngfor let two variables at the same timeAngular 5 ngfor 同时让两个变量
【发布时间】：2019-03-09 07:12:56
【问题描述】：

我需要在 for 中分配两个变量。 Angular 5+ 中的类似内容

<div *ngFor="let a of apple, let b of ball">
  <a [routerLink]="['/ball',b]">
    {{a}}
  </a>
</div>

有什么建议吗？

提前感谢您的帮助。

【问题讨论】：

好的，我会清楚地向你解释我想一个一个添加数组可能是推数组，其结构类似于danday74的示例并将其存储在本地存储中并检索它并一次又一次添加存储它。我在项目中不同的地方使用它。有什么办法吗。

【解决方案1】：

您可以使用 ngFor 的索引来访问第二个数组的元素。

<ng-container *ngFor="let a of apple; index as i">
   <h1>{{a}}</h1>
   <h2>{{b[i]}}</h2>
</ng-container>

【讨论】：

【解决方案2】：

将数据组织为对象数组更自然，而不是使用两个数组，如下所示：

this.things = [
  {
    apple: 'apple1',
    ball: 'ball1'
  },
  {
    apple: 'apple2',
    ball: 'ball2'
  }
]

然后你可以像这样遍历这个数组：

<div *ngFor="let thing of things">
  <a [routerLink]="['/ball', thing.ball]">
    {{ thing.apple }}
  </a>
</div>

这也是更具可读性和标准的做法。

【讨论】：

很好的解决方案！
很酷，谢谢。但是可以存储在localstorage中并检索这个数组吗？
如果 JSON 可以序列化（在 99% 的情况下可以）。请参阅此帖子（已接受的答案）以了解如何执行此操作...stackoverflow.com/questions/2010892/…
如果数据是循环的（不可序列化），只需对其进行规范化，即使用normalizr 或推出您自己的临时解决方案。
哇看起来像一个很棒的库，最初由 react 的制造商编写，每周下载 10 万次，喜欢它，可能（下划线）在这里矫枉过正，但值得了解

【解决方案3】：

您的数组的长度似乎相同，即Parallel Arrays。 你应该避免嵌套ngFor.

您可以使用一个数组的索引来查看另一个数组：

<div *ngFor="let a of apple; let i = index">
    <a [routerLink]="['/ball', ball[i]]">{{a}}</a>
</div>

【讨论】：