ลบรายการออกจากอาร์เรย์ที่เก็บไว้ในเชิงมุม 2

ฉันต้องการลบรายการออกจากอาร์เรย์ที่เก็บไว้ในเชิงมุม 2 ด้วย Type Script ฉันใช้บริการที่เรียกว่า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เพื่อลบรายการออกจากอาร์เรย์ สิ่งนี้ใช้เพื่อลบคุณสมบัติออกจากวัตถุเท่านั้น

คุณควรใช้spliceเพื่อลบองค์ประกอบออกจากอาร์เรย์:

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) ดังนั้นอย่าลังเลที่จะมองหาโซลูชัน JavaScript แม้ว่าจะทำงานกับ TypeScript ก็ตาม

สามารถทำได้ดังนี้:

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

ใช้splice()เพื่อลบรายการออกจากอาร์เรย์ซึ่งจะรีเฟรชดัชนีอาร์เรย์เพื่อให้เป็นผล

delete จะลบรายการออกจากอาร์เรย์ แต่จะไม่รีเฟรชดัชนีอาร์เรย์ซึ่งหมายความว่าหากคุณต้องการลบรายการที่สามออกจากรายการอาร์เรย์สี่รายการดัชนีขององค์ประกอบจะอยู่หลังจากลบองค์ประกอบ 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); 
}

ที่ทำงานสำหรับฉัน

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);