从阵列中删除项目 - 角4

-3

我正在研究Angular4中的一个简单的待办事项应用程序。我有以下方式安装应用程序：
从阵列中删除项目 - 角4

表单组件：这是将项目添加到待办事项列表的形式
项目组件：这是个别组件。
应用程序组件：我有一个* ngFor看看这里列出所有待办事项。

我在应该删除项目的项目组件上添加了一个新按钮，但我无法弄清楚如何“找到”或“找到”要拼接的项目的正确索引号或过滤掉。
我已经包含了链接到github repository here

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：

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：

<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：

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：

<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：

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

来源

2017-10-12 Gurgen Grigoryan

我得到，你可以拼接或过滤出来的顶部答案开始说： “首先，找到你想要删除的元素的索引” 这是我正在试图找出如何做。我想知道索引是基于他们试图删除的项目 –

不要在没有在Stack Overflow上添加资源摘要的情况下链接到外部资源。在这里带上相关的代码。我们不应该访问您的GitHub来帮助您。 – zero298

如果您需要我们的帮助，您能否至少向我们展示您的代码，而不是将我们指向其他地方，我们仍然需要自己搜索您的代码？ –

尝试这样的：

<app-item [listItem]="item" (itemDeleted)="onItemDeleted(i)"></app-item> 

onItemDeleted(index){ 
    this.toDoList.splice(index, 1); 
}

来源

2017-10-12 13:48:24 Chandru

这正是我开始试图做的，但它是说，找不到名称索引 –

你可能会得到这个错误，因为你没有在方法** onItemDeleted（i）**中传递“我”**在上面他是这样说的，试试看！ – JayDeeEss

@JayDeeEss所以我创建了以下输出：'@Output（）itemDeleted = new EventEmitter <{index：number}>（）;' 我开始为onDeleteItem编写代码，但并不完全确定我应包括在它...我到目前为止有： 'onDeleteItem（）{ this.itemDeleted.emit（） }' 我刚刚更新了所有的代码，包括我做了什么至今 –

不看你的代码，一个简单的方法来删除您的数组项。

myArray = myArray.filter(x => x.ITEM !== ITEM);

*编辑：拼写

来源

2017-10-12 13:47:49

您可以使用.filter（）：

onDeleteItem(id: number) { 
    this.list = this.list.filter(item => item.id !== id); 
}

，或者您可以通过用户.splice()，而是利用您需要获取阵列中物品的索引：

const index: number = functionToGetTheIndex(); 
this.list.splice(index, 1);

为了让你可以做这样的事情的指标：

for(var i = 0; i < this.list.length; i++) { 
    if(this.list[i].id === id) { 
    return i; 
    } 
}

*编辑：INT要数

来源

2017-10-12 14:05:55

我知道我可以使用这两种方法，我需要弄清楚的是如何找到数组中当前项目的索引 –

对不起，没有看到其他两个答案，当我发布。 –

在javascript中没有'int'类型 –

您可以使用如下因素代码：

在我们宣布开始rowItems：

rowItems: RowItems= new RowItems(0, "", "", new Array<Something>());

.... 方法代码

deleteRowOfSomething(rowIndex: number) { 
     console.log("removing row index: " + rowIndex); 
     this.rowItems.splice(rowIndex, 1); 
     this.changeDetectorRef.detectChanges(); 
    }

不`吨忘记导入库changeDetectorRef。

来源

2017-10-12 14:21:19 user7856586

从阵列中删除项目 - 角4

回答

相关问题