xóa mục khỏi mảng được lưu trữ trong góc 2

Question

Tôi muốn xóa một mục khỏi một mảng được lưu trữ ở góc 2, với Kiểu Script. Tôi đang sử dụng một dịch vụ gọi Dịch vụ dữ liệu, Bộ luật 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)]; 
} 
} 

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ờ, tất cả mọi thứ đang làm việc tốt trừ khi tôi cố gắng xóa một mục. Nhật ký hiển thị cho tôi rằng mục vẫn còn trong mảng và do đó vẫn được hiển thị trên trang. Làm thế nào tôi có thể loại bỏ các mục sau khi chọn nó với nút xóa ??

Answer 1

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. Hoặc để chính xác hơn, hãy đặt thuộc tính là undefined.

Bạn nên sử dụng splice để loại bỏ một phần tử từ một mảng:

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

Answer 2

Không sử dụng delete để loại bỏ một mục từ mảng và sử dụng splice() để thay thế.

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

Xem câu hỏi tương tự: How do I remove a particular element from an array in JavaScript?

Note, nguyên cảo đó là một superset của ES6 (mảng đều giống nhau ở cả hai nguyên cảo và JavaScript) vì vậy cảm thấy tự do để tìm kiếm các giải pháp JavaScript ngay cả khi làm việc với các nguyên cảo .

Answer 3

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

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

nơi data_item là mục cần xóa

EDIT Tôi quên một cái gì đó quan trọng - bạn phải ghi đè mảng của bạn với kết quả từ dòng bên trên:

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