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 솔루션을 자유롭게 찾아보십시오.
답변
이는 다음과 같이 달성 할 수 있습니다.
this.itemArr = this.itemArr.filter( h => h.id !== ID);
답변
<tbody *ngFor="let emp of $emps;let i=index">
<button (click)="deleteEmployee(i)">Delete</button></td>
과
deleteEmployee(i)
{
this.$emps.splice(i,1);
}
답변
다음과 같이 사용할 수 있습니다.
removeDepartment(name: string): void {
this.departments = this.departments.filter(item => item != name);
}
답변
특히 어레이가 FILTER 로직에 관련된 경우 스플 라이스가 충분하지 않은 경우가 있습니다. 따라서 먼저 해당 요소가 존재하는지 확인하여 정확한 요소를 제거 할 수 있습니다.
if (array.find(x => x == element)) {
array.splice(array.findIndex(x => x == element), 1);
}