Javascript 从数组中删除项目 - Angular 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46711200/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove Items from Array - Angular 4
提问by Gurgen Grigoryan
I'm working on a simple todo app in Angular4. I have the app setup in the following way:
我正在 Angular4 中开发一个简单的待办事项应用程序。我通过以下方式设置了应用程序：
Form Component: This is the form to add items to the to-do list
Item Component: This is the individual component.
App Component: I have a *ngFor look here going to list all of the todo items.
表单组件：这是将项目添加到待办事项列表的表单
项目组件：这是单个组件。
应用程序组件：我有一个 *ngFor 在这里查看将列出所有待办事项。
I've added a new button on the item component that is supposed to delete the item, however I can't figure out how to "find" or "locate" the correct index number for the item to splice or filter it out.
I've included a link to the github repository here
我在应该删除项目的项目组件上添加了一个新按钮，但是我不知道如何“查找”或“定位”项目的正确索引号以将其拼接或过滤掉。
我在此处包含了指向github 存储库的链接
app.component.html:
app.component.html：
<app-navbar></app-navbar>
<div class="container">
<app-form (itemAdded)="onItemAdded($event)"></app-form>
<div class="row">
<div class="col-md-3 mb-3"
*ngFor="let item of toDoList; let i=index">
<app-item
[listItem]="item"
(itemDeleted)="onItemDeleted($event)"></app-item>
</div>
</div>
</div>
app.component.ts:
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
toDoList = [
{
name: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
}
];
onItemAdded(itemData: {itemName: string}){
this.toDoList.push({
name: itemData.itemName
});
}
onItemDeleted(index: number){
this.toDoList.splice(index, 1);
}
}
form.component.html:
form.component.html：
<div class="title">
<h1 class="display-4">{{ title }}</h1>
</div>
<div class="input-group">
<input type="text" class="form-control" [(ngModel)]="newItem">
<span class="input-group-btn">
<button class="btn btn-success" type="button" (click)="onAddItem()">
<fa name="plus"></fa>
</button>
</span>
</div>
form.component.ts:
form.component.ts：
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
@Output() itemAdded = new EventEmitter<{itemName: string}>();
title = 'To-Do List';
newItem = '';
constructor() { }
ngOnInit() {
}
onAddItem(){
this.itemAdded.emit({itemName: this.newItem});
}
}
item.component.html:
item.component.html：
<div class="task">
<div class="mb-5 d-flex justify-content-between">
<fa name="circle-o" size="3x"></fa>
<button type="button" name="delete" class="btn btn-danger align-self-end" (click)="onDeleteItem()"><fa name="trash"></fa></button>
</div>
{{item.name}}
</div>
item.component.ts:
item.component.ts:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-item',
templateUrl: './item.component.html',
styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
@Input('listItem') item: {name: string};
@Output() itemDeleted = new EventEmitter<{index: number}>();
constructor() { }
ngOnInit() {
}
onDeleteItem() {
this.itemDeleted.emit() //need help with this
}
}
回答by Chandru
Try like this :
像这样尝试：
<app-item [listItem]="item" (itemDeleted)="onItemDeleted(i)"></app-item>
onItemDeleted(index){
this.toDoList.splice(index, 1);
}
回答by bryan noriega miguel
You can use .filter():
您可以使用 .filter()：
onDeleteItem(id: number) {
this.list = this.list.filter(item => item.id !== id);
}
or you can user .splice(), but to use it you will need to get the index of the item in the array:
或者您可以使用.splice()，但要使用它，您需要获取数组中项目的索引：
const index: number = functionToGetTheIndex();
this.list.splice(index, 1);
To get the index you can do something like this:
要获取索引，您可以执行以下操作：
for(var i = 0; i < this.list.length; i++) {
if(this.list[i].id === id) {
return i;
}
}
*Edit: int should be number
*编辑：int应该是数字
回答by H. Hakvoort
Without looking at your code, a simple way to delete items from your array.
无需查看您的代码，这是一种从数组中删除项目的简单方法。
myArray = myArray.filter(x => x.ITEM !== ITEM);
*Edit: spelling
*编辑：拼写
回答by user7856586
You can use the folowing code :
您可以使用以下代码：
at the start we announce rowItems :
一开始我们宣布 rowItems ：
rowItems: RowItems= new RowItems(0, "", "", new Array<Something>());
.... method in code
.... 代码中的方法
deleteRowOfSomething(rowIndex: number) {
console.log("removing row index: " + rowIndex);
this.rowItems.splice(rowIndex, 1);
this.changeDetectorRef.detectChanges();
}
don`t forget to import libraries for changeDetectorRef.
不要忘记为 changeDetectorRef 导入库。
