Angular 7 Реактивная форма - проблема с рендерингом и удалением элемента

Question

Привет, у меня проблема с простым компонентом angular, я использую реактивную форму для вставки текста, затем il oop by ng Для результатов

TEMPLATE

<form [formGroup]="colorsForm">
  <div>
    <label for="colorName">Color Name</label>
      <input id="colorName" type="text" class="form-control" 
        formControlName="colorName" name="colorName"/>
  </div>
  <button  type="button"  (click)="addCorlo()">ADD</button>
</form>
<ul>
<li *ngFor="let color of colorsList">{{ color.colorName }} <button (click)="delete()">DELETE</button></li>
</ul>

TS

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Reactive Form';
  colorsForm: FormGroup; // New Reactive Form
  colorsList: any[] = [];


  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {

    this.colorsForm = this.fb.group({
      colorName: [null]
    });

  }

  addCorlo() {
    if (this.colorsForm.valid) {
      let color = { 
        colorName: this.colorsForm.value.colorName,
      };
      this.colorsList.push(color);
    }
    this.colorsForm.reset();
   }

   delete(){
     console.log('delete')
   }
}

Я пытался удалить элемент, но мне это не удалось ...

это пример stackblitz ExampleLink

Answer 1

В app.component. html вы можете добавить let i = index в ngFor. Это необходимо для присвоения индекса каждому из элементов. Затем вы можете передать i функции удаления (click)="delete(i)".

    <li *ngFor="let color of colorsList; let i = index;">{{ color.colorName }} <button (click)="delete(i)">DELETE</button></li>

В app.component.ts вы можете использовать метод splice для удаления элемента из массива. В этом случае метод соединения принимает 2 параметра. Первый параметр - это позиция элемента, который вы собираетесь удалить, а второй параметр - количество элементов, которые нужно удалить.

    delete(i){
       this.colorsList.splice(i, 1);
    }

Вот ссылка на отредактированный код в Stackblitz: https://stackblitz.com/edit/example-reactive-form-f1auz8

Answer 2

вы захотите подсчитать индекс в ngFor:

 <li *ngFor="let color of colorList; let i = index">....

Передайте индекс i в метод и удалите его из массива на основе этого индекса.

Вот достойный реф: https://www.angularjswiki.com/angular/how-to-get-index-of-element-in-ngfor-angular/

Надеюсь, что это поможет,

Удачного кодирования!