在角度数组中更改值后如何获取有序索引? [英] How to get the ordered index after changing values in an array in angular?

问题描述

我有一个数组中的项目列表，

I am having a list of items in an array say,

Design
Analysis
Testing
Development

索引为

0,1,2,3

在这里，我使用的是有角的Dragula，用于拖放列表元素.通过使用dragula，我正在更改数组的位置，例如

Here i am using angular dragula which is used to drag and drop a list element. With the usage of dragula i am changing the position of an array say,

Analysis
Design
Development
Testing

顺序正在更改，但索引位置仍然相同，

The order is getting changed but whereas the index position is still the same like,

1,0,3,2

此处，索引位置不按顺序排列，尽管看起来像顺序，但看起来却像旧的索引值. 不管数组内部发生什么变化，我都需要具有相同的索引位置，这意味着即使顺序发生变化，索引位置也应始终从0,1,2,... so on开始.

Here the index position is not in the order and its looking like the older index value despite of the order it looks like. Whereas i need to have the same index position whatever change happen inside an array which means always the index position should start from 0,1,2,... so on even there is a change in the order.

我使用过的HTML组件

Html component that i have used,

    <div class="card-content">
        <div dropDirective (dropEvent)="addDropItem($event)" class="droppable" [dropHighlight]="'highlight'">
            <div [dragula]="'second-bag'">
                <app-generic-drop-box *ngFor="let item of itemsDropped; index as i" (editBtn)='editBtn($event)' (deleteBtn)='deleteBtn($event)' [genericBox]='item' class="arrow_box dropItem temp" (click)='indexOfItem(i)'> </app-generic-drop-box>
            </div>
        </div>
    </div>

在ts文件中，

        import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewContainerRef, OnDestroy } from '@angular/core';
        import { Router, ActivatedRoute } from '@angular/router';
        import { ScenarioMapService } from '../scenario-map.service';

        import { DynamicFormModel } from '../dynamic-form-config/dynamic-form-model';
        import { Textbox } from '../dynamic-form-config/textbox';
        import { CONFIG } from '../../app.config';

        @Component({
          selector: 'app-drop-area',
          templateUrl: './drop-area.component.html',
          styleUrls: ['./drop-area.component.scss']
        })
        export class DropAreaComponent implements OnInit, OnDestroy {

        indexOfItem(i) {
        console.log(i); 
        }

    }

在这里console.log(i)显示索引位置，如果用户单击列表(如果我更改数组的位置)，则需要在更改后像0,1,2,3...一样获得有序索引. 请帮助我达到目标.

Here console.log(i) shows the index position if user click on a list if i change the position of an array i need to get the ordered index after the change like 0,1,2,3... .. Kindly help me to achieve the result.

推荐答案

要重置AngularJS数组中的索引，可以完全不执行任何操作对其进行过滤.

To reset the index in AngularJS array you could filter it with no action at all.

这样，索引就可以重新设置.

That way the indexes get set again.

resetArr = orgArr.filter(function(){return true;});

数组索引1,0,3,2将再次为0,1,2,3，但数据仍然存在.

The array-indexes 1,0,3,2 will be 0,1,2,3 again but the data remains in place.

作为参考:只需重置索引JavaScript数组Stackoverflow线程...

这篇关于在角度数组中更改值后如何获取有序索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！