角度2のストアドアレイからアイテムを削除します

Question

角度2のストアドアレイからタイプスクリプトを使用してアイテムを削除します。私はデータサービス、の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を使用して配列からアイテムを削除することはできません。これは、オブジェクトからプロパティを削除するためにのみ使用されます。または、正確には、プロパティをundefinedに設定します。

あなたは、配列から要素を削除するspliceを使用する必要があります。

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

Answer 2

は、配列から項目を削除し、代わりにsplice()を使用するようにdeleteを使用しないでください。

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

同様の質問を参照してください：活字体はES6のスーパーセットである（配列は活字体とJavaScriptの両方で同じです）ので、活字体で作業する場合でも、JavaScriptのソリューションを探して自由に感じることを、How do I remove a particular element from an array in JavaScript?

注意を。

Answer 3

私はこれを行うの角度2の方法は、フィルター方式だと思う：

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

data_itemが

EDIT を削除すべき項目である

私は重要な何かを忘れてしまった - あなたがする必要はあり上記の行の結果を配列に上書きする：

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