以角度2从存储阵列中删除项

我想删除一个项目从一个存储的数组在角度2，与类型脚本。我正在使用一个名为 数据服务,theDataService 代码的服务:

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

现在，除了我试图删除一个项目之外，一切都正常。日志显示该项仍然在数组中，因此仍然显示在页面上。如何删除项目后，我选择了它与删除按钮？

531713

小开

最佳答案

不能使用 delete从数组中删除项。这只用于从对象中移除属性。

应该使用剪接从数组中删除元素:

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

小开

不要使用 delete从数组中删除项，而是使用 splice()。

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

看到一个类似的问题: 如何在 JavaScript 中从数组中删除特定元素？

注意，TypeScript 是 ES6的超集(TypeScript 和 JavaScript 中的数组是相同的) ，所以即使在使用 TypeScript 时也可以随意查找 JavaScript 解决方案。

小开

我认为角度2的方法是过滤法:

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

其中 data _ item 是应该删除的项

小开

使用 splice()从数组中删除条目，它将刷新数组索引作为结果。

delete将从数组中删除该项，但它不会刷新数组索引，这意味着如果你想从四个数组项中删除第三个项，元素的索引将在删除元素0、1、4之后

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

小开

您可以从数组中删除数据

this.data.splice(index, 1);

小开

这可以通过以下方式实现:

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

小开

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

小开

有时，拼接是不够的，特别是如果您的数组涉及到 FILTER 逻辑。因此，首先，你可以检查你的元素是否存在，以确保移除那个元素:

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

小开

你可以这样使用:

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

小开

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


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

还有

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

小开

我没问题

 this.array.pop(index);


for example index = 3


this.array.pop(3);