英文:
Angular - Re-arrange array items based on dragNDrop and dropdown
问题
只返回翻译好的部分：
我有5张图片要显示，我希望保持这些图片的顺序与它们的索引一致。
有两种方法可以改变内容：
- 通过拖放：工作正常，但下拉菜单的值没有改变。
- 通过选择下拉菜单的值 -
在这个下拉菜单中，值的顺序将是1、2、3、4和5。
如果我想改变第一张图片(1)的顺序并选择3，那么第3张图片将与第1张图片交换位置，现在顺序仍然相同，但内容已经交换了。
我在代码中添加了注释以便进一步理解。是否有人可以帮我解决这个问题？
在stackblitz上分享一个托管的演示链接在此。
英文:
I have 5 images to display and what i want is to maintain the order of these images as per their index.
There are 2 ways by which content can be changed:
- By Drag and drop: works fine but drop down value is not getting changed.
- By selecting drop down value -
In this drop down value would be in the order 1,2,3,4 and 5.
If I want to change the order of the first image(1) and select 3 then image at 3rd place should be swapped
with image at 1st place and now order is still same but the content is swapped.
I have added comments in code for further understanding. could anyone help me out with this?
sharing a hosted demo on stackblitz here
答案1
得分: 2
以下是您提供的内容的翻译：
我分叉了您的 StackBlitz，并实现了通过下拉值更改触发的元素交换。
这是生成的 select 元素。
<select [value]="obj.dropDownIndex" (change)="swap(obj.dropDownIndex - 1, $event.target.value - 1)">
<option *ngFor="let options of dynamicDropDownArray;" [value]='options.id'>
{{options.value}}
</option>
</select>
以及组件类中的 swap 方法。
swap(index1: number, index2: number): void {
const element1 = this.photosArray[index1];
const element2 = this.photosArray[index2];
const element1DropdownIndex = element1.dropDownIndex;
element1.dropDownIndex = element2.dropDownIndex;
element2.dropDownIndex = element1DropdownIndex;
this.photosArray[index1] = element2;
this.photosArray[index2] = element1;
}
请注意，在交换数组中的元素时，它们的
dropDownIndex也必须交换。
更新
与其使用 dropDownIndex，我们可以简化代码并从 photosArray 查询元素索引。这将导致以下代码片段。
HTML 模板：
<select [value]="photosArray.indexOf(obj) + 1" (change)="swap(photosArray.indexOf(obj), $event.target.value - 1)">
<option *ngFor="let options of dynamicDropDownArray;" [value]='options.id'>
{{options.value}}
</option>
</select>
组件类：
swap(index1: number, index2: number): void {
const element1 = this.photosArray[index1];
const element2 = this.photosArray[index2];
this.photosArray[index1] = element2;
this.photosArray[index2] = element1;
}
请查看我修改后的 StackBlitz。
英文:
I forked your StackBlitz and implemented element swapping triggered by drop-down value change.
Here's the resulting select element.
<select [value]="obj.dropDownIndex" (change)="swap(obj.dropDownIndex - 1, $event.target.value - 1)">
<option *ngFor="let options of dynamicDropDownArray;" [value]='options.id'>
{{options.value}}
</option>
</select>
and the swap method in the component class.
swap(index1: number, index2: number): void {
const element1 = this.photosArray[index1];
const element2 = this.photosArray[index2];
const element1DropdownIndex = element1.dropDownIndex;
element1.dropDownIndex = element2.dropDownIndex;
element2.dropDownIndex = element1DropdownIndex;
this.photosArray[index1] = element2;
this.photosArray[index2] = element1;
}
> Note that when swapping the elements in the array, their dropDownIndex must also be exchanged.
UPDATE
Instead of using dropDownIndex, we can simplify the code and query the element index from photosArray. This results in the following code snippets.
HTML template:
<select [value]="photosArray.indexOf(obj) + 1" (change)="swap(photosArray.indexOf(obj), $event.target.value - 1)">
<option *ngFor="let options of dynamicDropDownArray;" [value]='options.id'>
{{options.value}}
</option>
</select>
component class:
swap(index1: number, index2: number): void {
const element1 = this.photosArray[index1];
const element2 = this.photosArray[index2];
this.photosArray[index1] = element2;
this.photosArray[index2] = element1;
}
Please have a look at my amended StackBlitz
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论