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

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

Type Script를 사용하여 angular 2에 저장된 배열에서 항목을 삭제합니다.데이터 서비스 코드인 데이터 서비스(Data Service Code:

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 솔루션을 자유롭게 찾을 수 있습니다.

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

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

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

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

if (array.find(x => x == element)) {
   array.splice(array.findIndex(x => x == element), 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); 
}

사용하다splice()어레이에서 항목을 제거하려면 어레이 인덱스를 새로 고칩니다.

delete어레이에서 항목을 삭제하지만 어레이 인덱스를 새로 고치지 않습니다.즉, 4개의 어레이 항목에서 세 번째 항목을 삭제할 경우 요소의 인덱스는 0,1,4 요소를 삭제한 후가 됩니다.

this.data.splice(this.data.indexOf(msg), 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