Hapus item dari array yang disimpan di sudut 2

Saya ingin menghapus item dari array yang disimpan di sudut 2, dengan Type Script. Saya menggunakan layanan yang disebut Layanan Data, Kode Layanan Data :

export class DataService {

    private data: string[] = [];

    addData(msg: string) {
        this.data.push(msg);
    }

    getData() {
        return this.data;
    }

    deleteMsg(msg: string) {
        delete [this.data.indexOf(msg)];
    }
}

Dan kelas komponen saya:

import {Component} from '@angular/core'
import {LogService} from './log.service'
import {DataService} from './data.service'

@Component({
    selector: 'tests',
    template:
            `
        <div class="container">
            <h2>Testing Component</h2>
            <div class="row">
                <input type="text" placeholder="log meassage" #logo>
                <button class="btn btn-md btn-primary" (click)="logM(logo.value)">log</button>
                <button class="btn btn-md btn-success" (click)="store(logo.value)">store</button>
                <button class="btn btn-md btn-danger" (click)="send()">send</button>
                <button class="btn btn-md " (click)="show()">Show Storage</button>
                <button (click)="logarray()">log array</button>
            </div>
            <div class="col-xs-12">
                <ul class="list-group">
                    <li *ngFor="let item of items" class="list-group-item" #ival>
                        {{item}}
                        <button class="pull-right btn btn-sm btn-warning" (click)="deleteItem(ival.value)">Delete
                        </button>
                    </li>
                </ul>
            </div>
            <h3>{{value}}</h3>
            <br>
        </div>
    `
})

export class TestsComponent {

    items: string[] = [];

    constructor(
        private logService: LogService,
        private dataService: DataService) {

    }

    logM(message: string) {
        this.logService.WriteToLog(message);
    }

    store(message: string) {
        this.dataService.addData(message);
    }

    send(message: string) {
    }

    show() {
        this.items = this.dataService.getData();
    }

    deleteItem(message: string) {
        this.dataService.deleteMsg(message);
    }

    logarray() {
        this.logService.WriteToLog(this.items.toString());
    }
}

Sekarang, semuanya berfungsi dengan baik kecuali ketika saya mencoba menghapus item. Log menunjukkan kepada saya bahwa item tersebut masih dalam larik, dan oleh karena itu masih ditampilkan di halaman. Bagaimana cara menghapus item setelah memilihnya dengan tombol hapus ??

Anda tidak dapat menggunakan deleteuntuk menghapus item dari array. Ini hanya digunakan untuk menghapus properti dari objek.

Anda harus menggunakan sambungan untuk menghapus elemen dari array:

deleteMsg(msg:string) {
    const index: number = this.data.indexOf(msg);
    if (index !== -1) {
        this.data.splice(index, 1);
    }        
}

Saya pikir cara Angular 2 untuk melakukan ini adalah metode filter:

this.data = this.data.filter(item => item !== data_item);

dimana data_item adalah item yang harus dihapus

Jangan gunakan deleteuntuk menghapus item dari larik dan gunakan splice()sebagai gantinya.

this.data.splice(this.data.indexOf(msg), 1);

Lihat pertanyaan serupa: Bagaimana cara menghapus elemen tertentu dari array di JavaScript?

Perhatikan, TypeScript adalah superset dari ES6 (arraynya sama di TypeScript dan JavaScript) jadi silakan mencari solusi JavaScript bahkan saat bekerja dengan TypeScript.

Ini dapat dicapai sebagai berikut:

this.itemArr = this.itemArr.filter( h => h.id !== ID);

<tbody *ngFor="let emp of $emps;let i=index">

<button (click)="deleteEmployee(i)">Delete</button></td>

dan

deleteEmployee(i)
{
  this.$emps.splice(i,1);
}

Anda bisa menggunakan seperti ini:

removeDepartment(name: string): void {
    this.departments = this.departments.filter(item => item != name);
  }

Terkadang, sambungan tidak cukup terutama jika larik Anda terlibat dalam logika FILTER. Jadi, pertama-tama Anda dapat memeriksa apakah elemen Anda ada untuk memastikan untuk menghapus elemen yang tepat:

if (array.find(x => x == element)) {
   array.splice(array.findIndex(x => x == element), 1);
}

Gunakan splice()untuk menghapus item dari larik, perbarui indeks larik menjadi konsekuensinya.

delete akan menghapus item dari array tetapi tidak menyegarkan indeks array yang berarti jika Anda ingin menghapus item ketiga dari empat item array indeks elemen akan menjadi setelah menghapus elemen 0,1,4

this.data.splice(this.data.indexOf(msg), 1)

Anda dapat menghapus data dari array

this.data.splice(index, 1);

//declaration 
list: Array<any> = new Array<any>(); 

//remove item from an array 
removeitem() 
{
const index = this.list.findIndex(user => user._id === 2); 
this.list.splice(index, 1); 
}

Itu berhasil untuk saya

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);