Eliminarea elementelor din array – Angular 4 (Programare, Javascript, Array-Uri, Angular, Typescript)

Gurgen Grigoryan a intrebat.
a intrebat.

Lucrez la o aplicație simplă Todo în Angular4. Am configurat aplicația în felul următor:

Form Component: Form Component: Acesta este formularul pentru a adăuga elemente la lista de lucruri de făcut
Componenta Item: Item Component: Aceasta este componenta individuală.
Componenta App: Am o *ngFor look aici care va lista toate elementele de făcut.

Am adăugat un nou buton pe componenta elementului care ar trebui să șteargă elementul, însă nu-mi dau seama cum să „găsesc” sau să „localizez” numărul de index corect pentru elementul pentru a-l îmbina sau filtra.
Am inclus un link către github repository aici

app.component.html:

<app-navbar></app-navbar>
<div class="container">
  <app-form (itemAdded)="onItemAdded($event)"></app-form>
  <div class="row">
    <div class="col-md-3 mb-3"
    *ngFor="let item of toDoList; let i=index">
      <app-item
      [listItem]="item"
      (itemDeleted)="onItemDeleted($event)"></app-item>
    </div>
  </div>
</div>

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toDoList = [
    {
      name: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    }
  ];

  onItemAdded(itemData: {itemName: string}){
    this.toDoList.push({
      name: itemData.itemName
    });
  }
  onItemDeleted(index: number){
    this.toDoList.splice(index, 1);
  }
}

form.component.html:

<div class="title">
  <h1 class="display-4">{{ title }}</h1>
</div>
<div class="input-group">
  <input type="text" class="form-control" [(ngModel)]="newItem">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button" (click)="onAddItem()">
      <fa name="plus"></fa>
    </button>
  </span>
</div>

form.component.ts:

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  @Output() itemAdded = new EventEmitter<{itemName: string}>();
  title = 'To-Do List';
  newItem = '';

  constructor() { }

  ngOnInit() {
  }
  onAddItem(){
    this.itemAdded.emit({itemName: this.newItem});
  }

}

item.component.html:

<div class="task">
  <div class="mb-5 d-flex justify-content-between">
    <fa name="circle-o" size="3x"></fa>
    <button type="button" name="delete" class="btn btn-danger align-self-end" (click)="onDeleteItem()"><fa name="trash"></fa></button>
  </div>
  {{item.name}}
</div>

item.component.ts:

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

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

  @Input('listItem') item: {name: string};
  @Output() itemDeleted = new EventEmitter<{index: number}>();

  constructor() { }

  ngOnInit() {
  }
  onDeleteItem() {
    this.itemDeleted.emit() //need help with this
  }
}

Comentarii

  • Înțeleg că poți să le îmbini sau să le filtrezi răspunsul de sus începe prin a spune: „În primul rând, găsiți indexul elementului pe care doriți să îl eliminați” Asta este ceea ce încerc să aflu cum să fac. Vreau să aflu care este indexul în funcție de elementul pe care încerc să îl șterg –  > Por Gurgen Grigoryan.
  • Nu creați linkuri către resurse externe fără a adăuga un rezumat al resursei respective aici pe Stack Overflow. Aduceți codul relevant aici. Nu ar trebui să fie nevoie să vă vizităm GitHub-ul pentru a vă ajuta. –  > Por zero298.
  • Dacă aveți nevoie de ajutorul nostru, puteți măcar să ne arătați codul dvs. în loc să ne arătați în altă parte, unde trebuie să căutăm noi înșine codul dvs. –  > Por yqlim.
  • nu aveți nicio ieșire în Componenta elementului dvs. care se numește itemDeleted pentru a scrie acest lucru <app-item (itemDeleted)="onItemDeleted($event)"></app-item> –  > Por Mohamed Ali RACHID.
  • @Med_Ali_Rachid Tocmai am adăugat următoarele în fișierul item.component.ts: @Output() itemDeleted = new EventEmitter<{index: number}>(); –  > Por Gurgen Grigoryan.
4 răspunsuri
Chandru

Încercați astfel :

<app-item [listItem]="item" (itemDeleted)="onItemDeleted(i)"></app-item>

onItemDeleted(index){ 
    this.toDoList.splice(index, 1); 
}

Comentarii

  • Asta este exact ceea ce am început să încerc să fac, dar spune că nu poate găsi indexul de nume –  > Por Gurgen Grigoryan.
  • s-ar putea să primești această eroare pentru că nu treci „i” în metodă onItemDeleted(i) ceea ce în răspunsul enunțat mai sus o face, încercați asta! –  > Por JayDeeEss.
  • @JayDeeEss Deci, am creat următoarea ieșire: @Output() itemDeleted = new EventEmitter<{index: number}>(); și am început să scriu codul pentru onDeleteItem, dar nu știu exact ce ar trebui să includ în el… ceea ce am până acum: onDeleteItem() { this.itemDeleted.emit() } Tocmai am actualizat tot codul pentru a include ceea ce am făcut până acum –  > Por Gurgen Grigoryan.
  • Nevermind, adăugând ceea ce am adăugat, a făcut truc, Ar trebui să specific ce este emis? atunci când folosesc: this.itemDeleted.emit() –  > Por Gurgen Grigoryan.
bryan noriega miguel

Puteți utiliza .filter():

onDeleteItem(id: number) {
    this.list = this.list.filter(item => item.id !== id);
}

sau puteți utiliza .splice(), dar pentru a-l utiliza va trebui să obțineți indexul elementului din matrice:

const index: number = functionToGetTheIndex();
this.list.splice(index, 1);

Pentru a obține indexul, puteți face ceva de genul următor:

for(var i = 0; i < this.list.length; i++) {
   if(this.list[i].id === id) {
     return i;
   }
}

*Edit: int ar trebui să fie număr

Comentarii

  • Știu că pot folosi ambele metode, dar trebuie să aflu cum să găsesc indexul elementului curent din matrice.  > Por Gurgen Grigoryan.
  • Scuze, nu am văzut celelalte două răspunsuri în timp ce postam. –  > Por bryan noriega miguel.
  • nu există int type in javascript –  > Por Mohamed Ali RACHID.
H. Hakvoort

Fără să mă uit la codul dvs., o modalitate simplă de a șterge elementele din matrice.

myArray = myArray.filter(x => x.ITEM !== ITEM);

*Modificare: ortografie

user7856586

Puteți utiliza următorul cod :

la început anunțăm rowItems :

rowItems: RowItems= new RowItems(0, "", "", new Array<Something>());

….method în cod

deleteRowOfSomething(rowIndex: number) {
        console.log("removing row index: " + rowIndex);
        this.rowItems.splice(rowIndex, 1);
        this.changeDetectorRef.detectChanges();
    }

nu uitați să importați bibliotecile pentru changeDetectorRef.