如何遍历对象文字数组？

Question

我有带有拖放模块的Angular项目。现在，我的可拖动列表包含在对象数组中，如下所示：

vegetables = [
    {name: 'Carrot', type: 'vegetable'},
    {name: 'Onion', type: 'vegetable'},
    {name: 'Potato', type: 'vegetable'},
    {name: 'Capsicum', type: 'vegetable'}]; 

并将其显示在组件中，如下所示：

 <div class="list-group">
                    <li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let item of vegetables"
                        [dragClass]="'active'" [dragTransitClass]="'active'" [dragData]="item" [dragScope]="item.type" [dragEnabled]="dragEnabled">
                        {{item.name}}
                    </li>
                </div>

问题是，每次我从vegetables列表中拖放一个项目时，我都想显示一个包含新蔬菜的新列表。

所以我尝试做这样的事情：

vegetables = [
    {name: 'Carrot', type: 'vegetable'},
    {name: 'Onion', type: 'vegetable'},
    {name: 'Potato', type: 'vegetable'},
    {name: 'Capsicum', type: 'vegetable'}],
    [
    {name: 'Carrot2', type: 'vegetable'},
    {name: 'Onion2', type: 'vegetable'},
    {name: 'Potato2', type: 'vegetable'},
    {name: 'Capsicum2', type: 'vegetable'}
    ];

在vegetables变量中具有多个对象数组。

但是问题是我不知道如何在组件模板中显示它。我尝试过：

<li class="list-group-item list-group-item-action list-group-item-success" [draggable] *ngFor="let item of vegetables[i]"

每次我从i列表中拖放一次时，vegetables只是增量变量，但是它当然不能那样工作，我也不知道正确的方法。

那么，每次我拖放时，如何遍历vegetables中的多个数组以呈现新的蔬菜列表？

任何帮助表示感谢，谢谢。