loại bỏ mục khỏi mảng được lưu trữ trong góc 2

Tôi muốn xóa một mục khỏi một mảng được lưu trữ trong góc 2, với Type Script. Tôi đang sử dụng một dịch vụ có tên Dịch vụ Dữ liệu, Mã Dịch vụ Dữ liệu :

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

Và lớp thành phần của tôi:

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

Bây giờ, mọi thứ đang hoạt động tốt ngoại trừ khi tôi cố gắng xóa một mục. Nhật ký cho tôi thấy rằng mục vẫn nằm trong mảng và do đó vẫn được hiển thị trên trang. Làm cách nào tôi có thể xóa mục sau khi chọn bằng nút xóa ??

Bạn không thể sử dụng deleteđể xóa một mục khỏi một mảng. Điều này chỉ được sử dụng để loại bỏ một thuộc tính khỏi một đối tượng.

Bạn nên sử dụng splice để xóa một phần tử khỏi một mảng:

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

Tôi nghĩ rằng cách Angular 2 để làm điều này là phương pháp bộ lọc:

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

trong đó data_item là mục cần được xóa

Không sử dụng deleteđể xóa một mục khỏi mảng và sử dụng splice()thay thế.

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

Xem một câu hỏi tương tự: Làm cách nào để xóa một phần tử cụ thể khỏi một mảng trong JavaScript?

Lưu ý rằng TypeScript là một tập hợp siêu của ES6 (các mảng đều giống nhau trong cả TypeScript và JavaScript) vì vậy hãy thoải mái tìm kiếm các giải pháp JavaScript ngay cả khi làm việc với TypeScript.

Điều này có thể đạt được như sau:

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>

và

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

Bạn có thể sử dụng như thế này:

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

Đôi khi, mối ghép là không đủ, đặc biệt nếu mảng của bạn có liên quan đến logic LỌC. Vì vậy, trước hết bạn có thể kiểm tra xem phần tử của mình có tồn tại hay không để chắc chắn tuyệt đối xóa phần tử chính xác đó:

if (array.find(x => x == element)) {
   array.splice(array.findIndex(x => x == element), 1);
}

Sử dụng splice()để loại bỏ mục khỏi mảng, nó làm mới chỉ mục mảng sẽ là kết quả.

delete sẽ xóa mục khỏi mảng nhưng nó không làm mới chỉ mục mảng, có nghĩa là nếu bạn muốn xóa mục thứ ba khỏi bốn mục mảng thì chỉ số của các phần tử sẽ có sau khi xóa phần tử 0,1,4

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

Bạn có thể xóa dữ liệu khỏi mảng

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

Công việc đó cho tôi

 this.array.pop(index);

 for example index = 3 

 this.array.pop(3);