arrays - 显示数组的索引 - Angular 4+

Question

我创建了一个拖放功能。拖动的元素将被放到一个数组中。拖动工具保存在一个组件中。并且有 3 个字段 text，number 和 date 将被拖到这个表单中。输入将被监听，然后插入到 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 在 ngFor 中提供了 index 变量，因此您可以在迭代数组时使用它。

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

ngFor 还提供了其他变量。您可以从 official angular docs 中阅读它们