ג'אווהסקריפט - הסרת פריט ממערך המאוחסן באנגולר 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());
    }
}

עכשיו, הכל עובד טוב חוץ מזה שכאשר אני מנסה למחוק פריט. היומן מראה לי שהפריט עדיין במערך, ולכן הוא עדיין מוצג בדף. איך אני יכול להסיר את הפריט אחרי שבחרתי אותו עם כפתור המחיקה??

תשובה #1

אי אפשר להשתמש ב-delete כדי להסיר פריט ממערך. זה משמש רק להסרת תכונה מאובייקט.

אתה צריך להשתמש ב-splice כדי להסיר אלמנט ממערך:

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

תשובה #2

אני חושב שהדרך ב-Angular 2 לעשות זאת היא באמצעות מתודת הפילטר:

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

שבו data_item הוא הפריט שצריך להימחק

תשובה #3

אל תשתמש ב-delete כדי להסיר פריט ממערך, השתמש במקום זאת ב-splice().

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

ראה שאלה דומה: איך אני מסיר אלמנט מסוים ממערך ב-JavaScript?

שימו לב, ש-TypeScript הוא על-קבוצה של ES6 (המערכים הם זהים גם ב-TypeScript וגם ב-JavaScript), אז אתם יכולים להרגיש חופשי לחפש פתרונות ב-JavaScript גם כשעובדים עם TypeScript.

תשובה #4

<tbody *ngFor="let emp of $emps;let i=index">

<button (click)="deleteEmployee(i)">Delete</button></td>

ו

deleteEmployee(i)
{
  this.$emps.splice(i,1);
}

תשובה #5

אתה יכול להשתמש כך:

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