Javascript 从阵列中移除项目-角度4

我正在Angular4中开发一个简单的todo应用程序。我通过以下方式设置应用程序：

表单组件：这是向待办事项列表添加项目的表单
项目组件：这是单个组件。
应用程序组件：我在这里有一个*ngFor look，它将列出所有待办事项。

我在item组件上添加了一个新按钮，用于删除该项目，但我不知道如何“查找”或“定位”该项目的正确索引号，以便拼接或过滤该项目。
我已经包括了一个链接到

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>

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

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

form.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>

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

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

{{title}}

form.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);
  }
}

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

}

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

从'@angular/core'导入{Component，OnInit，Output，EventEmitter}；
@组成部分({
选择器：“应用程序窗体”，
templateUrl:'./form.component.html'，
样式URL:['./form.component.css']
})
导出类FormComponent实现OnInit{
@Output（）itemsadded=neweventemitter（）；
标题=‘待办事项清单’；
newItem=''；
构造函数（）{}
恩戈尼尼特（）{
}
onAddItem（）{
this.itemsadded.emit（{itemName:this.newItem}）；
}
}

item.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>

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

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

item.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);
  }
}

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

}

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

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
@组成部分({
选择器：“应用程序项”，
templateUrl:'./item.component.html'，
样式URL:['./item.component.css']
})
导出类ItemComponent实现OnInit{
@输入（'listItem'）项：{name:string}；
@Output（）itemDeleted=新的EventEmitter（）；
构造函数（）{}
恩戈尼尼特（）{
}
onDeleteItem（）{
this.itemDeleted.emit（）//需要此方面的帮助吗
}
}

无需查看代码，这是一种从数组中删除项目的简单方法

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

---

*编辑：在不查看代码的情况下拼写，这是一种从数组中删除项目的简单方法

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

*编辑：拼写

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

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

onItemDeleted（索引）{
这个.toDoList.splice（索引，1）；
}

试着这样做：

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

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

onItemDeleted（索引）{
这个.toDoList.splice（索引，1）；
}

您可以使用.filter（）：

您也可以使用用户，但要使用它，您需要获取数组中项目的索引：

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

for（var i=0；i

*编辑：int应该是您可以使用的数字。filter（）：

您也可以使用用户，但要使用它，您需要获取数组中项目的索引：

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

for（var i=0；i

---

*编辑：int应该是数字

您可以使用以下代码：

首先，我们宣布以下项目：

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

---

不要忘记导入changeDetectorRef的库。

您可以使用以下代码：

首先，我们宣布以下项目：

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

---

---

别忘了导入changeDetectorRef的库。

我知道你可以拼接或过滤掉它。最上面的答案是这样开始的：“首先，找到你想要删除的元素的索引”这就是我试图找到的方法。我想知道索引是基于他们试图删除的项的，如果不在堆栈溢出上添加该资源的摘要，就不要链接到外部资源。把相关代码带到这里。我们不需要访问您的GitHub来帮助您。如果您需要我们的帮助，你能不能至少给我们看一下你的代码，而不是把我们指向我们还需要自己搜索你的代码的其他地方？你的项目组件中没有任何名为

itemdelected

的输出来编写这个

@Med\u aliu\Rachid我刚刚在我的item.Component.ts文件中添加了以下内容：

@Output（）itemDeleted=新的EventEmitter（）我知道你可以拼接或过滤掉它，最上面的答案是这样开始的：“首先，找到你想要删除的元素的索引”这就是我试图找到的方法。我想知道索引是基于他们试图删除的项的，如果不在堆栈溢出上添加该资源的摘要，就不要链接到外部资源。把相关代码带到这里。我们不需要访问您的GitHub来帮助您。如果您需要我们的帮助，你能不能至少给我们看一下你的代码，而不是把我们指向我们还需要自己搜索你的代码的其他地方？你的项目组件中没有任何名为
itemdelected
的输出来编写这个
@Med\u aliu\Rachid我刚刚在我的item.Component.ts文件中添加了以下内容：
@Output（）itemDeleted=新的EventEmitter（）这正是我开始尝试做的，但是它说找不到名称索引您可能会得到错误，因为您没有在方法onItemDeleted（i）中传递“i”，而在上述答案中，他是，请尝试@Jaydeess所以我创建了以下输出：
@output（）itemdeled=neweventemitter（）我开始为onDeleteItem编写代码，但不确定应该在其中包含什么。。。到目前为止我所做的：
onDeleteItem（）{this.itemdelected.emit（）}
我刚刚更新了所有的代码，以包括我迄今为止所做的一切。不管怎样，添加我所添加的内容，是否有技巧，我是否应该指定要发出的内容？当使用：
this.itemdelected.emit（）
这正是我开始尝试做的事情，但是它说找不到名称索引，您可能会遇到这个错误，因为您没有在方法onItemDeleted（i）中传递“i”，而在上述答案中，他是，请尝试@Jaydeess所以我创建了以下输出：
@output（）itemdeled=neweventemitter（）我开始为onDeleteItem编写代码，但不确定应该在其中包含什么。。。到目前为止我拥有的：
onDeleteItem（）{this.item