从角度2中的存储数组中删除项目 [英] remove item from stored array in angular 2

问题描述

我想用Type Script从角度2的存储数组中删除一个项目.我正在使用名为数据服务数据服务代码

I want to remove an item from a stored array in angular 2, with Type Script. I am using a service called Data Service, the DataService 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());
    }
}

现在，一切正常，除非我尝试删除某项.日志显示该项目仍在数组中，因此仍显示在页面上.使用删除按钮将其选中后，如何删除该项目?

Now, everything is working good except when I try to delete an item. The log shows me that the item is still in the array, and therefore is still shown on the page. How can I remove the item after selecting it with the delete button??

推荐答案

您不能使用delete从数组中删除项目.这仅用于从对象中删除属性.

You can't use delete to remove an item from an array. This is only used to remove a property from an object.

您应该使用 拼接 > 从数组中删除元素:

You should use splice to remove an element from an array:

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

这篇关于从角度2中的存储数组中删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！