Javascript 如何在angular2+；

我需要在模板中查看不同的数组索引及其值。我有一个目标：

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>

{{item.name}

但是

[蔬菜[0]]

只从列表中输出“胡萝卜”，仅此而已。相反，我需要它输出第一个数组及其所有内容，然后在第二次迭代中，用“Carrotas”、“Onionas”等输出第二个数组。如何实现这一点

---

0

将被替换为

i

，每次通过

蔬菜中的不同列表数组时，该值都会递增。首先，您提供的数组是错误的。我假设会是这样的：

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
编写索引（例如，检查索引是奇数还是偶数），或者将其简化为单个索引。e、 g:

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

这将创建如下数组：

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

编辑：啊。。我只看到你的问题只在于数组定义。您在那里创建数组的方式是错误的，因为您只创建了第一个数组，而忽略了第二个数组（javascript…）。尝试更改我提供的数组，看看它是否有效

EDIT2：它应该是2D数组，而您只有1D（而且也是错误的，因为1D数组不能拆分为多个数组），您缺少的只是将整个数组包装到另一个数组中，它就会工作。
首先，您提供的数组是错误的。我假设会是这样的：

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
编写索引（例如，检查索引是奇数还是偶数），或者将其简化为单个索引。e、 g:

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

这将创建如下数组：

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

编辑：啊。。我只看到你的问题只在于数组定义。您在那里创建数组的方式是错误的，因为您只创建了第一个数组，而忽略了第二个数组（javascript…）。尝试更改我提供的数组，看看它是否有效

EDIT2：它应该是2D数组，而您只有1D（而且也是错误的，因为1D数组不能拆分为多个数组），您缺少的只是将整个数组包装到另一个数组中，它就会工作。
是的，这很有效，谢谢。我需要更多地了解js阵列和所有这些。现在我可以用这行代码
[蔬菜[0][0]]
得到胡萝卜了。现在我只需要弄清楚如何嵌套ngFor循环，并将其绑定到
[draggable]
指令，以打印出0数组中的所有蔬菜名称，然后在第1数组中，依此类推。我认为您必须使用类似
*ngFor=“let item of vegets[INDEX]”的东西，它将返回索引行中的所有蔬菜。因此，
item
成为您所期望的。正如注释一样，
reduce
也可以是这样：
const vegetablesReduced=蔬菜。reduce（（r，x）=>r.concat（[…x]），[]）和您得到相同的结果。是的。那是更快的变种。或者您可以更快地使用：
r.concat（x）
是的，这很有效，谢谢。我需要更多地了解js阵列和所有这些。现在我可以用这行代码
[蔬菜[0][0]]
得到胡萝卜了。现在我只需要弄清楚如何嵌套ngFor循环，并将其绑定到
[draggable]
指令，以打印出0数组中的所有蔬菜名称，然后在第1数组中，依此类推。我认为您必须使用类似
*ngFor=“let item of vegets[INDEX]”的东西，它将返回索引行中的所有蔬菜。因此，
item
成为您所期望的。正如注释一样，
reduce
也可以是这样：
const vegetablesReduced=蔬菜。reduce（（r，x）=>r.concat（[…x]），[]）和您得到相同的结果。是的。那是更快的变种。或者您可以更快地使用：
r.concat（x）