按給定索引 angular 將所選對象從數組內的 position 移動到 position

Question

i have array of objects and the two select box with some values in from and to select box(index), where i am trying to move the object "from"(index) selected position "to"(index) selected position and vice versa在給定數組中，而不更改其他對象的索引或 position 值。 如果我 select 來自 select 盒子的值小於“到” select 盒子的值，那么我正在使用的邏輯是有效的，但否則它不會。

下面是我正在努力移動值但它不起作用的代碼和邏輯。

 import { Component, OnInit } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { name = "Angular"; data = [{ id: "fmgbwe45", age: 24, gender: "male" }, { id: "kjregh23", age: 27, gender: "female" }, { id: "kjfdhg87", age: 30, gender: "male" }, { id: "lsdjfk43", age: 10, gender: "female" }, { id: "lsdjfk43", age: 15, gender: "female" }, { id: "lsdjfk43", age: 14, gender: "female" }, { id: "lsdjfk43", age: 50, gender: "female" }, { id: "lsdjfk43", age: 19, gender: "female" } ]; from: ""; to: ""; ngOnInit() {} changeSelect(event, value) { if (value === "from") this.from = event.target.value; else this.to = event.target.value; // console.log(this.to, "====", this.from); this.data.forEach((item, i) => { if (this.to && this.from) { let f = this.data.splice(parseInt(this.from), 1)[0]; var d = this.data.splice(parseInt(this.to), 0, f); console.log(this.data, f); } else {} }); } }

 <h2>pretty-print:</h2> <form action="/action_page.php"> <label for="cars">Choose a from index:</label> <select name="cars" (change)="changeSelect($event,'from')"> <option *ngFor="let data1 of data; let i = index" [value]="i+1">{{data1.age}}+ {{i+1}}</option> </select> == <label for="cars">Choose a To index:</label> <select name="cars" (change)="changeSelect($event,'to')"> <option *ngFor="let data1 of data; let i = index" [value]="i+1">{{data1.age}}+ {{i+1}}</option> </select> <div *ngFor="let data1 of data; let i = index"> <pre>{{data1 | json}} + {{i+1}} </pre> </div> </form>

如果我在選擇索引值時出錯，請幫助我解決或糾正我。

下面是我希望顯示數據的示例：

我正在選擇索引 val "from" = 6, "to" = 3 下面是我需要的 object

 { "id": "fmgbwe45", "age": 24, "gender": "male" } + 1 { "id": "kjregh23", "age": 27, "gender": "female" } + 2 { "id": "lsdjfk43", "age": 14, "gender": "female" } + 3 // this is moved from 6rd position to 3th position or index, other in same position { "id": "lsdjfk43", "age": 10, "gender": "female" } + 4 { "id": "lsdjfk43", "age": 15, "gender": "female" } + 5 { "id": "kjfdhg87", "age": 30, "gender": "male" } + 6 // this is moved from 3rd position to 6th position or index { "id": "lsdjfk43", "age": 50, "gender": "female" } + 7 { "id": "lsdjfk43", "age": 19, "gender": "female" } + 8

下面是代碼的鏈接：

https://stackblitz.com/edit/angular-prettyprint-xhhzsk?file=src%2Fapp%2Fapp.component.ts

Answer 1

你可以這樣做

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  data = [
    { id: "fmgbwe45", age: 24, gender: "male" },
    { id: "kjregh23", age: 27, gender: "female" },
    { id: "kjfdhg87", age: 30, gender: "male" },
    { id: "lsdjfk43", age: 10, gender: "female" },
    { id: "lsdjfk43", age: 15, gender: "female" },
    { id: "lsdjfk43", age: 14, gender: "female" },
    { id: "lsdjfk43", age: 50, gender: "female" },
    { id: "lsdjfk43", age: 19, gender: "female" }
  ];
  from: "";
  to: "";

  ngOnInit() {}

  changeSelect(event, value) {
    if (value === "from") this.from = event.target.value;
    else this.to = event.target.value;
    if (this.from && this.to) {
      let tempSequence = this.data[parseInt(this.from) - 1];
      this.data[parseInt(this.from) - 1] = this.data[parseInt(this.to) - 1];
      this.data[parseInt(this.to) - 1] = tempSequence;
      console.log(this.data);
    }
  }
}

組件.html

<h2>pretty-print:</h2>
<form action="/action_page.php">

  <label for="cars">Choose a from index:</label>
<select name="cars" (change)="changeSelect($event,'from')" >
  <option *ngFor="let data1 of data; let i = index" [value]="i+1">{{data1.age}}+ {{i+1}}</option>

</select>
==
  <label for="cars">Choose a To index:</label>

<select name="cars" (change)="changeSelect($event,'to')" >
  <option *ngFor="let data1 of data; let i = index" [value]="i+1">{{data1.age}}+ {{i+1}}</option>

</select>
<div *ngFor="let data1 of data; let i = index">
<pre >{{data1 | json}} + {{i+1}} </pre>
</div>
</form>