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

Question

I have a formArray that add/remove object dynamically from it. I have a *ngFor to display that formArray. At the same time I have to patch the stored array to that formArray, Now if I want to add another object it pushes at last index and displays at last in Html view, I want to display the last added object at top, so how can i do that? I just want to display.

here is the code 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>

here is the func to patch array.

 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); }

Now when I add a new array object its get added at the last index and displays also at last, I want to just display the last added object at top. How can i do that?

Answer 1

In your addProjectArray(), you can put the new item at the top.

So rather than pushing in the array, you can use the array.unshift method.

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

Answer 2

Use Insert It will let you add a new AbstractControl at the given index in the array.

Try this:

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

Example