Удаление элемента из списка

Question

Я новичок в Angular и пытаюсь создать простое приложение для создания списка. Когда пользователь вводит элемент, он добавляется в список. Эта часть приложения работает нормально. Сейчас я пытаюсь разрешить пользователю удалять элемент из списка, когда он нажимает на «х» в элементе списка.

Я уже сделал это, но когда я удаляю элемент из списка, происходит неправильный монтаж в массиве. Я считаю, что мне нужно получить индекс предмета (или что-то в этом роде), но я точно не знаю, как это сделать!

Вот компонент элемента html:

<div class="row">
    <div class="new-item">
        <p class="desc">{{item.desc}}</p>
        <p class="start">{{item.start}}</p>     
        <p class="end">{{item.end}}</p>
        <button class="btn-danger"><i class="glyphicon glyphicon-remove"></i></button>
    </div>

</div>

вот файл машинописи компонента элемента:

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

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
  @Input() item: {desc: string, start: any, end: any} 

  constructor() { }

  ngOnInit() {
  }

} 

вот html родительского компонента:

<div class="text-center">
    <h1>To Do List</h1>
</div>
<app-users-input (gotUserInput)="afterUserInput($event)"></app-users-input> 
<br>
<div class="row">
    <div class="list">
        <app-item *ngFor="let item of items" (click)="removeItem(item)" [item]="item"></app-item> 
    </div>
</div>

вот код машинописного текста из родительского компонента:

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

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

    afterUserInput(serverData: {desc: string, start: number, end: number}) { 
      this.items.push({
        desc: serverData.desc,
        start: serverData.start,
        end: serverData.end
    })

    };

removeItem(item) {
  this.items.splice(item, 1);
}

    }

Есть еще один компонент, который обрабатывает ввод данных пользователем. Я не включил этот компонент в свое сообщение, так как не считал его релевантным.

Answer 1

В зависимости от способа настройки, вам необходимо

• Добавить функцию (click)="removeItem()" к вашему элементу приложения. html
• Редактировать элемент приложения класс для добавления removeItem() метода
• , потому что ваш обработчик кликов находится внутри элемента приложения, вам нужно событие 'output', которое вызывается
• В родительском компоненте HTML вам нужно перехватите (outputEvent) = "handleRemoveItem ()"
• , наконец, в родительском компоненте handleRemoveItem (), вам необходимо удалить элемент из списка.

Answer 2

компонент элемента html

<button class="btn-danger" (click)="deleteItemEvent(item)"><i class="glyphicon glyphicon-remove"></i></button>

элемент компонента ts

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

 @Output() deleteItemFromArray = new EventEmitter();

 deleteItemEvent(item){
    this.deleteItemFromArray.emit(item);
 }

родительский компонент

 <app-item *ngFor="let item of items" (deleteItemFromArray)="removeItem($event)" [item]="item"></app-item>