Удалить элемент из сохраненного массива в angular 2

Я хочу удалить элемент из сохраненного массива в угловых 2, с помощью Type Script. Я использую сервис под названием Data Service, код DataService:

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

и мой компонент класса:

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

Теперь все работает хорошо, кроме случаев, когда я пытаюсь удалить элемент. Журнал показывает мне, что элемент все еще находится в массиве, и, следовательно, все еще отображается на странице. Как я могу удалить элемент после выбора его кнопкой удаления??

Ответ 1

Вы не можете использовать delete для удаления элемента из массива. Это используется только для удаления свойства из объекта.

Вы должны использовать splice, чтобы удалить элемент из массива:

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

Ответ 2

Я думаю, что Angular 2 способ сделать это метод фильтра:

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

где data_item - элемент, который должен быть удален

Ответ 3

Не используйте delete для удаления элемента из массива и вместо него используйте splice().

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

См. аналогичный вопрос: Как удалить конкретный элемент из массива в JavaScript?

Обратите внимание, что TypeScript является надмножеством ES6 (массивы одинаковы как для TypeScript, так и для JavaScript), поэтому не стесняйтесь искать решения JavaScript даже при работе с TypeScript.

Ответ 4

Иногда сращивания недостаточно, особенно если ваш массив задействован в логике FILTER. Итак, прежде всего вы могли бы проверить, существует ли ваш элемент, чтобы быть абсолютно уверенным, чтобы удалить именно этот элемент:

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

Ответ 5

Это может быть достигнуто следующим образом:

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

Ответ 6

Вы можете использовать как это:

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

Ответ 7

Используйте splice() чтобы удалить элемент из массива, чтобы обновить индекс массива.

delete удалит элемент из массива, но не обновит индекс массива, что означает, что если вы хотите удалить третий элемент из четырех элементов массива, индекс элементов будет после удаления элемента 0,1,4

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

Ответ 8

Вы можете удалить данные из массива

this.data.splice(index, 1);

Ответ 9

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

Ответ 10

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

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

а также

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

Ответ 11

Это работает для меня

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);