Angular 8：如何在Html中将数组中动态添加的对象显示在顶部？

Question

我有一个 formArray add/remove 从它动态对象。我有一个 *ngFor 来显示那个 formArray。同时我必须将存储的数组修补到那个 formArray，现在，如果我想添加另一个对象，它会在最后索引处推送并在 Html 视图中最后显示，我想在顶部显示最后添加的对象，那么我该怎么做呢？我只想展示。

这是代码ts

this.form = this.fb.group({
  project: this.fb.array([
    this.fb.group({
      type: ['', Validators.required],
      date: ['', Validators.required],
      amount: ['', Validators.required],
    })
  ])
})


get projectArray() {
  return this.form.get('project') as FormArray;
}

addProjectArray() {
  this.projectArray.push(
    this.fb.group({
      type: ['', Validators.required],
      date: ['', Validators.required],
      amount: ['', Validators.required],
    })
  );
}

deleteProject(index) {
  this.projectArray.removeAt(index);
}

html

<div class="" *ngFor="let item of projectArray.controls; let i=index" [formGroupName]="i">
  <div class="row">
    <div class="col-sm-3">
      <div class="form-group">
        <label class="">Type:</label>
        <select class="" formControlName="type">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="form-group">
        <label class="">Date:</label>
        <input class="" type="text" formControlName="date">
      </div>
    </div>
    <div class="col-sm-3">
      <div class="form-group">
        <label class="">Amount:</label>
        <input class="" type="text" formControlName="amount">
      </div>
    </div>
  </div>

</div>

这里是修补数组的函数。

patchProjectArray(pArray) {
  const array = pArray.map(data => {
    return this.fb.group({
      type: data.type,
      date: data.date,
      amount: data.amount,
    })
  })
  const studFormArray: FormArray = this.fb.array(array);
  this.form.setControl('project', studFormArray);
}

现在，当我添加一个新的数组对象时，它会添加到最后一个索引并最后显示，我只想在顶部显示最后添加的对象。我该怎么做？

Answer 1

在您的 addProjectArray() 中，您可以将新项目放在顶部。

因此，您可以使用 array.unshift 方法而不是压入数组。

addProjectArray() {
  this.projectArray.unshift(
    this.fb.group({
      type: ['', Validators.required],
      date: ['', Validators.required],
      amount: ['', Validators.required],
    })
  );
}

Answer 2

使用 Insert 它会让您在数组中的给定索引处添加一个新的 AbstractControl。

试试这个：

addProjectArray() {
  this.projectArray.insert(0,
    this.fb.group({
      type: ['', Validators.required],
      date: ['', Validators.required],
      amount: ['', Validators.required],
    })
  );
}

Example

Angular 8：如何在Html中将数组中动态添加的对象显示在顶部？

Angular 8: How to display dynamically added object in an array at top in Html?

angular

angular-reactive-forms

formarray

angular8