显示数组的索引 - Angular 4+

Question

我创建了一个拖放功能。拖动的元素将被放到一个数组中。拖动工具保存在一个组件中。并且有 3 个字段文本、数字和日期将被拖到此表单中。输入将被监听，然后插入 dropzone 数组。我需要获取数组的相关索引并显示。但我无法做到。下面是代码段。

.html

 <div *ngFor='let tool of dropzone'>

            <label>{{dropzone.tool}}  </label>
<div>

组件.ts

dropzone = [];

  move(draggedTool, dropzone): void {
    dropzone.push(draggedTool);  
    console.log(dropzone);

  }  

输出

(3) ["Text", "Number", "Date"]
0: "Text"
1: "Number"
2: "Date"
length: 3
__proto__: Array(0)

如何获取拖动工具的索引并显示？

Answer 1

Angular 提供了index变量 inngFor以便您可以在迭代数组时使用它。

<div *ngFor='let tool of dropzone; let i = index'>
    <label>{{dropzone.tool}}</label>
    <label>{{ i }}</label>
<div>

ngFor 还提供了其他变量。您可以从官方角度文档中阅读它们