Question

我需要在模板中查看不同的数组索引及其值。我有这个对象：

->

我这样做：

vegetables = [
    {name: 'Carrot', type: 'vegetable'},
    {name: 'Onion', type: 'vegetable'},
    {name: 'Potato', type: 'vegetable'},
    {name: 'Capsicum', type: 'vegetable'}],
    [
      {name: 'Carrotas', type: 'vegetable'},
      {name: 'Onionas', type: 'vegetable'},
      {name: 'Potatoas', type: 'vegetable'},
      {name: 'Capsicumas', type: 'vegetable'}]

但是<li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let items of [vegetables[0]]" [dragClass]="'active'" [dragTransitClass]="'active'" [dragData]="item" [dragScope]="item.type" [dragEnabled]="dragEnabled"> {{item.name}} </li>仅从列表中输出“胡萝卜”，仅此而已。相反，我需要它输出第一个数组及其所有内容，然后在第二次迭代中，输出带有“ Carrotas”，“ Onionas”等的第二个数组。如何实现此目的？

[vegetables[0]]将替换为0，该值每次在i内部的不同列表数组中递增。

Answer 1

首先，您提供的数组是错误的。我假设它将是这样的：

vegetables = [[
{name: 'Carrot', type: 'vegetable'},
{name: 'Onion', type: 'vegetable'},
{name: 'Potato', type: 'vegetable'},
{name: 'Capsicum', type: 'vegetable'}],
[
  {name: 'Carrotas', type: 'vegetable'},
  {name: 'Onionas', type: 'vegetable'},
  {name: 'Potatoas', type: 'vegetable'},
  {name: 'Capsicumas', type: 'vegetable'}]]

如果我理解正确，要么必须用*ngIf来写索引（例如，检查索引是奇数还是偶数），或者将它们减少为一个。例如：

const vegetablesReduced = vegetables.reduce((r, x) => [...r, ...x], []);

这将创建如下数组：

vegetablesReduced = [
  {name: 'Carrot', type: 'vegetable'},
  ...
  {name: 'Carrotas', type: 'vegetable'},
  ...
];

编辑：嗯..我只看到您的问题仅在于数组定义。您在其中创建数组的方式是错误的，因为仅创建第一个和第二个数组会被忽略（javascript ...）。尝试按照我提供的方法更改数组，然后查看是否可行。

EDIT2：它应该是2D数组，而您只有1D（并且还会出错，因为1D数组无法拆分为多个数组），您所缺少的只是将整个东西包装到另一个数组中，它会起作用。

如何在angular2 +的模板视图中执行嵌套循环

1 个答案: