Question

我在Angular 2中创建了一个动态表单，在单击按钮时添加了附加项。我现在想要实现一个表单上/下功能，它基本上使用“移动”按钮替换项目。以下是我的代码：

component.ts

    public pipeLineForm: FormGroup;
    pipelineConfigs: PipelineConfigs[];

constructor(
    private http: Http,
    private _fb: FormBuilder)

    ngOnInit() {
    // initialize form here
    this.pipeLineForm = this._fb.group({
        pipelineConfigs: this.initPipeLineArray()
    });
}

initPipeLineArray() {
    let pipeArray = this._fb.array([]);
    pipeArray.push(this.initPipeline());
    pipeArray.push(this.initPipeline());
    return pipeArray;
}

initPipeline() {
    return this._fb.group({
       sourceType: ['', Validators.required],
       sourceName: ['', Validators.required],
       sourcePath: ['', Validators.required],
       query: ['', Validators.required]
    });
}


removePipeline(i: number) {
    if (i > 1) {
    const control = <FormArray>this.pipeLineForm.controls['pipelineConfigs'];
    control.removeAt(i);
    }
}

addNewPipelineConfigs() {
    const control = <FormArray>this.pipeLineForm.controls['pipelineConfigs'];
    control.push(this.initPipeline());
}

pipelineconfigs.ts

    export class PipelineConfigs {
    searchField: string;
    sourceType: string;
    sourceName: string;
    sourcePath: string;
    query: string;
}

HTML

  <div class="panel panel-default clearfix" [formGroup] = "pipeLineForm">
            <div class="row"  >
                <div class="col-xs-12">
                    <p class="margin-b20px">This is the base line item and you can change it using up &amp; down arrows.
                    </p>
                </div>
            </div>
            <div formArrayName="pipelineConfigs">
            <div class="row" *ngFor="let pipes of pipeLineForm.controls.pipelineConfigs.controls; let i=index;" >
                <div [formGroupName]="i">
                    <div class="col-xs-10 additional-details-fields">
                    <div class="row">
                        <div class="col-xs-4">
                            <label class="float-label" [class.empty]="sourceType1 ==''">
                                <span class="placeholder">Select Source Type
                                    <span class="hide-placeholder">&nbsp;</span>
                                </span>
                                <select formControlName="sourceType">
                                    <option disabled>Select Source Type</option>
                                    <option value="Stream">Stream</option>
                                    <option value="Stream 1">Stream 1</option>
                                    <option value="Stream 2">Stream 2</option>
                                </select>
                            </label>
                        </div>
                        <div class="col-xs-4 form-group">
                            <label class="float-label" [class.empty]="sourceName1.length==0">
                                <span class="placeholder">Source Name
                                    <span class="hide-placeholder">&nbsp;</span>
                                </span>
                                <input formControlName="sourceName" type="text">
                            </label>
                        </div>
                        <div class="col-xs-4 form-group">
                            <label class="float-label" [class.empty]="sourcePath1.length==0">
                                <span class="placeholder">Source Path
                                    <span class="hide-placeholder">&nbsp;</span>
                                </span>
                                <input formControlName="sourcePath" type="text">
                            </label>
                        </div>
                        <div class="col-xs-12 form-group">
                            <label class="float-label" [class.empty]="query1.length==0">
                                <span class="placeholder">Query
                                    <span class="hide-placeholder">&nbsp;</span>
                                </span>
                                <textarea formControlName="query">{{query}}</textarea>
                            </label>
                        </div>
                    </div>
                    </div>

                <div class="col-xs-2 additional-details-actions">
                    <div class="col-xs-4">
                        <label class="label-text block">Order</label>
                        <label class="label-value block">{{i}}
                        </label>
                    </div>
                    <div class="col-xs-4">
                        <div class="row">
                            <label class="label-text block">Move</label>
                            <div>
                                <a class="clickable actionbtn order-up">Order Up</a>
                                <a class="clickable actionbtn order-down">Order Down</a>
                            </div>
                        </div>
                    </div>

我基本上已经确定 pipelineConfigs 是一个对象数组，不知何故我需要更改项目的索引，但由于我是使用打字稿的角色新手，我无法弄清楚如何把它放在代码中。如果有人可以提供帮助，我会很高兴。

由于

Answer 1

你必须

定义2个方法：moveUp和moveDown
定义一个swap函数，它将逐个交换数组中的项目

以下是一个简单示例和demo

<强> component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  array = ["One", "Two", "Three", "Four", "Five"]

  moveUp(index: number) {
    console.log("up", this.array[index]);
    if (index >= 1)
      this.swap(index, index - 1)
  }

  moveDown(index: number) {
    console.log("down", this.array[index])
    if(index < this.array.length-1)
    this.swap(index, index + 1)
  }

  private swap(x: any, y: any) {
    var b = this.array[x];
    this.array[x] = this.array[y];
    this.array[y] = b;
  }
}

<强> component.html

<div *ngFor="let item of array; let i=index">
  <span>{{item}}</span>
  <button (click)="moveUp(i)">Move up</button>
  <button (click)="moveDown(i)">Move down</button>
</div>

向上/向下移动表格2

1 个答案: