从角度2中删除存储数组中的项目

Question

我想使用Type Script从角度为2的存储数组中删除一个项目.我正在使用名为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());
}
}

现在,除非我尝试删除项目,否则一切正常.日志显示该项目仍在数组中,因此仍显示在页面上.如何使用删除按钮选择项目后删除该项目？

Answer 1

您无法使用delete从数组中删除项目.这仅用于从对象中删除属性.

您应该使用splice从数组中删除元素:

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

Answer 2

我认为Angular 2这样做的方法是过滤方法:

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

其中data_item是应删除的项目

Answer 3

不要用于delete从数组中删除项目splice()而是使用它.

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

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

请注意,TypeScript是ES6的超集(TypeScript和JavaScript中的数组相同),因此即使使用TypeScript,也可以随意查找JavaScript解决方案.

Answer 4

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

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

和

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

Answer 5

你可以这样使用：

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

Answer 6

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

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

Answer 7

有时，拼接是不够的，尤其是当您的数组涉及 FILTER 逻辑时。因此，首先您可以检查您的元素是否确实存在以绝对确保删除该确切元素：

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