web-dev-qa-db-ja.com

角度2で格納された配列から項目を削除する

Type Scriptを使って、角度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());
}
}

今、私はアイテムを削除しようとしたときを除いて、すべてがうまくいっています。ログには、アイテムがまだ配列内にあるため、まだページに表示されていることが表示されます。削除ボタンで項目を選択した後、項目を削除するにはどうすればよいですか。

angulartypescript
74
aghed aljlad

deleteを使って配列から項目を削除することはできません。これはオブジェクトからプロパティを削除するためにのみ使用されます。

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

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

私はこれを行うためのAngular 2方法がフィルター方法であると思います：

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

data_itemは削除する項目です。

87
KaFu

配列から項目を削除するためにdeleteを使用せず、代わりにsplice()を使用してください。

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

JavaScriptで配列から特定の要素を削除する方法は？

TypeScriptはES6のスーパーセット（TypeScriptとJavaScriptの両方で配列は同じです）であるため、TypeScriptを使用している場合でもJavaScriptソリューションを自由に探してください。

27
martin

これは次のようにして実現できます。

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

3
HamidKhan

あなたはこのように使うことができます：

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

配列からデータを削除できます

this.data.splice(index, 1);
0
Jatin Devani

私のために働く

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);
0
Vishal Monga
//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); 
}
0
Muniaswari D
<tbody *ngFor="let emp of $emps;let i=index">

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

そして

deleteEmployee(i)
{
  this.$emps.splice(i,1);
}
0
gulla prathap reddy

ときには、配列がFILTERロジックに関係している場合は特に、接続が十分ではないことがあります。したがって、まず最初に、その要素が存在するかどうかを確認して、その要素そのものを確実に削除することができます。

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

splice()を使用して配列から項目を削除し、結果として配列インデックスをリフレッシュします。

deleteは配列から項目を削除しますが、配列インデックスを更新しません。つまり、4つの配列項目から3番目の項目を削除する場合、要素のインデックスは要素0,1,4の後になります。

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