Quiero eliminar un elemento de una matriz almacenada en angular 2, con Type Script. Estoy usando un servicio llamado Servicio de datos, el Código de :
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)];
}
}
Y mi clase de componente:
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());
}
}
Ahora, todo funciona bien, excepto cuando intento eliminar un elemento. El registro me muestra que el elemento todavía está en la matriz y, por lo tanto, todavía se muestra en la página. ¿Cómo puedo eliminar el elemento después de seleccionarlo con el botón Eliminar?
javascript
angular
typescript
aghed aljlad
fuente
fuente
indexOf()
para-1
, se eliminará el último elemento de la matriz cuandomsg
no se ha encontrado!Creo que la forma de Angular 2 de hacer esto es el método de filtro:
donde data_item es el elemento que debe eliminarse
fuente
splice()
estaba eliminando todo excepto el valor que quería eliminar de la matrizNo lo utilice
delete
para eliminar un elemento de la matriz y utilizarlosplice()
en su lugar.Vea una pregunta similar: ¿Cómo elimino un elemento en particular de una matriz en JavaScript?
Tenga en cuenta que TypeScript es un superconjunto de ES6 (las matrices son las mismas tanto en TypeScript como en JavaScript), así que siéntase libre de buscar soluciones de JavaScript incluso cuando trabaje con TypeScript.
fuente
indexOf()
para-1
, se eliminará el último elemento de la matriz cuandomsg
no se ha encontrado!Esto se puede lograr de la siguiente manera:
this.itemArr = this.itemArr.filter( h => h.id !== ID);
fuente
y
fuente
Puedes usar así:
fuente
A veces, el empalme no es suficiente, especialmente si su matriz está involucrada en una lógica de FILTRO. Entonces, en primer lugar, puede verificar si su elemento existe para estar absolutamente seguro de eliminar ese elemento exacto:
fuente
find
, luego unafindIndex
, son dos búsquedas cuando podrías hacer una (como la respuesta aceptada).Úselo
splice()
para eliminar el elemento de la matriz, actualice el índice de la matriz para que sea una consecuencia.delete
eliminará el elemento de la matriz, pero no actualizará el índice de la matriz, lo que significa que si desea eliminar el tercer elemento de cuatro elementos de la matriz, el índice de elementos será después de eliminar el elemento 0,1,4fuente
Puede eliminar los datos de la matriz
fuente
fuente
Que funciona para mi
fuente