각도 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
'IT' 카테고리의 다른 글
HTML 테이블에서 열을 숨기는 방법은 무엇입니까? (0) | 2020.09.17 |
---|---|
Boost를 사용하여 C ++에서 샘플 벡터의 평균 및 표준 계산 계산 (0) | 2020.09.17 |
Meteor 게시 / 구독 이해 (0) | 2020.09.17 |
괄호 사이에 텍스트를 반환하는 정규식 (0) | 2020.09.17 |
JavaScript에서 URL로 이동하는 onclick 함수를 추가 하시겠습니까? (0) | 2020.09.17 |