IT

각도 2의 배열에서 항목 제거

lottoking 2020. 9. 17. 08:07
반응형

각도 2의 배열에서 항목 제거


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

이제 항목을 제외하고 모든 것이 잘 작동합니다. 로그는 항목이 여전히 배열에 있으므로 페이지에 계속 표시됨을 보여줍니다. 선택 후 제거 버튼을 선택해야합니까?


delete배열에서 항목을 제거하는 데 사용할 수 없습니다 . 이것은 객체에서 속성을 제거하는 데만 사용됩니다.

스플 라이스사용하여 배열에서 요소를 제거해야합니다.

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

Angular 2 방법은 필터 방법이라고 생각합니다.

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

여기서 data_item은 삭제해야하는 항목입니다.


사용하지 마십시오 delete배열에서 항목을 제거하고 사용하는 splice()대신.

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

유사한 질문을 참조하십시오. JavaScript의 배열에서 특정 요소를 어떻게 제거합니까?

TypeScript는 ES6의 상위 집합입니다 (배열은 TypeScript와 JavaScript에서 모두 동일 함). TypeScript로 작업 할 때도 JavaScript 솔루션을 찾아보세요.


특히 어레이가 FILTER 로직에 관련된 경우 스플 라이스가 충분하지 않은 경우가 있습니다. 따라서 먼저 해당 요소가 존재하는지 확인하여 해당 요소를 완전히 제거 할 수 있습니다.

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

이는 다음과 같이 달성 할 수 있습니다.

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


다음과 같이 사용할 수 있습니다.

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

splice()배열에서 항목을 제거하는 데 사용 하여 배열 인덱스를 새로 고쳐야합니다.

delete 배열에서 항목을 제거하지만 배열 인덱스를 새로 고치지 않습니다. 즉, 4 개의 배열 항목에서 세 번째 항목을 제거하려는 경우 요소의 인덱스는 요소 0,1,4를 삭제 한 후입니다.

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

배열에서 데이터를 삭제할 수 있습니다.

this.data.splice(index, 1);

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

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

참고 URL : https://stackoverflow.com/questions/40462369/remove-item-from-stored-array-in-angular-2

반응형