[英]Remove Items from Array - Angular 4
I'm working on a simple todo app in Angular4. 我正在Angular4中开发一个简单的待办事项应用程序。 I have the app setup in the following way: 我通过以下方式设置了应用程序:
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
}
}
Try like this : 尝试这样:
<app-item [listItem]="item" (itemDeleted)="onItemDeleted(i)"></app-item>
onItemDeleted(index){
this.toDoList.splice(index, 1);
}
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应该是数字
Without looking at your code, a simple way to delete items from your array. 无需查看代码,这是一种从阵列中删除项目的简单方法。
myArray = myArray.filter(x => x.ITEM !== ITEM);
*Edit: spelling *编辑:拼写
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导入库。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.