öğeyi açısal 2'de depolanan diziden kaldır

Type Script ile açısal 2'de depolanmış bir diziden bir öğeyi kaldırmak istiyorum. Data Service adlı bir hizmeti , DataService Kodu kullanıyorum:

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

Ve bileşen sınıfım:

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

Şimdi, bir öğeyi silmeye çalıştığım zamanlar dışında her şey iyi çalışıyor. Günlük bana öğenin hala dizide olduğunu ve bu nedenle sayfada hala gösterildiğini gösteriyor. Sil düğmesiyle seçtikten sonra öğeyi nasıl kaldırabilirim?

deleteBir diziden bir öğeyi kaldırmak için kullanamazsınız . Bu, yalnızca bir nesneden bir özelliği kaldırmak için kullanılır.

Bir diziden bir öğeyi kaldırmak için splice kullanmalısınız :

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

Bunu yapmanın Angular 2 yolunun filtre yöntemi olduğunu düşünüyorum:

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

data_item silinmesi gereken öğedir

Kullanmayın deletediziden bir öğeyi kaldırmak ve kullanımı splice()yerine.

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

Benzer bir soruya bakın: JavaScript'teki bir diziden belirli bir öğeyi nasıl kaldırırım?

TypeScript'in ES6'nın bir üst kümesi olduğunu unutmayın (diziler hem TypeScript hem de JavaScript'te aynıdır), bu nedenle TypeScript ile çalışırken bile JavaScript çözümleri aramaktan çekinmeyin.

Bu şu şekilde başarılabilir:

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>

ve

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

Bunun gibi kullanabilirsiniz:

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

Bazen, özellikle diziniz bir FİLTRE mantığıyla ilgiliyse, ekleme yeterli değildir. Bu nedenle, her şeyden önce, öğenizin var olup olmadığını kontrol edebilirsiniz, bu öğeyi tam olarak kaldırdığınızdan emin olun:

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

splice()Öğeyi diziden kaldırmak için kullanın , sonuç olarak dizi dizinini yenileyin.

delete öğeyi diziden kaldıracak, ancak dizi dizinini yenilemeyecektir; bu, üçüncü öğeyi dört dizi öğesinden çıkarmak istiyorsanız, öğelerin dizini öğe silindikten sonra olacaktır 0,1,4

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

Verileri diziden silebilirsiniz

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

Bu benim için çalışıyor

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);