根据 select 删除存储在数组中的项目

Question

我正在尝试根据所选选项删除存储在数组中的项目，以更好地理解阅读此代码：

component.html

<fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" name="tipoprodotto">
    <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes" [value]="p.id">{{p.description}}</fnd-option>
</fnd-extended-select>

Component.ts

  deleteMsg() {
    this.agreementfilter.landingPageTypes.splice(1, 1);
  }

基本上使用此代码，当我按下按钮删除项目时，仅删除数组的 FIRST 对象。

我需要: 删除我从数组中选择的项目。

我有什么样的选择来解决这个问题？

感谢您的帮助！

Answer 1

你可以这样传递，添加点击事件并将索引作为参数传递

Component.html

 <fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" 
     name="tipoprodotto">
    <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes; let i = index" 
      [value]="p.id" (click)="deleteMsg(i)">{{p.description}}</fnd-option>
  </fnd-extended-select>

Component.ts

 deleteMsg(index) {

   this.agreementfilter.landingPageTypes.splice(this.agreementfilter.landingPageTypes.indexof(index), 1);
}

Answer 2

您可以通过查找项目的索引来删除该项目。假设您要删除的项目是您选择的项目（设置为模型）- 'landingType'

      deleteMsg() {
        this.agreementfilter.landingPageTypes.splice(this.agreementfilter.landingPageTypes.indexOf(landingType), 1);
}

试试这个：

    var months = ['Jan', 'March', 'April', 'June'];
      console.log(months);
    // expected output: Array ['Jan','March', 'April', 'June']

     console.log(months);
     months.splice(months.indexOf('April'), 1);
   // expected output: Array ['Jan','March', 'June']

Answer 3

在删除消息函数中传入要删除的项目的 ID，然后使用 findIndex 在数组中查找该项目的索引。获得索引后，您可以使用 splice 删除该索引处的条目。

我以这个 Stackblitz 为例：https://stackblitz.com/edit/angular-icpmqo

public deleteMsg(id: number) {
    this.landingPageTypes.splice(this.landingPageTypes.findIndex((page) => page.id === id), 1);
}

Answer 4

@Nenad Radak 在他的回答评论中提供了正确的解决方案。

我将该值存储在我的组件中，然后在按钮事件发生时再次调用它。

代码：

临时：字符串；

<fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" name="tipoprodotto">
  <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes; let i = index" (click)="tempor(i)" [value]="p.id">{{p.description}}</fnd-option>
</fnd-extended-select>


 tempor(index){debugger;
   this.temporary= index
 }
  deleteMsg() {

    this.agreementfilter.landingPageTypes.splice(this.temporary, 1);
 }

Answer 5

component.html

<fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" 
 name="tipoprodotto">
<fnd-option *ngFor="let p of agreementfilter?.landingPageTypes; let i = index" 
  [value]="i">{{p.description}}</fnd-option></fnd-extended-select> <button (click)="deleteMsg(landingType)"></button>

component.ts

 landingType;

  public deleteMsg(id: number) {
    // finds index of item to be deleted and then deletes the item from the array
    this.landingPageTypes.splice(id, 1);

    // output array to console with item deleted
    console.log('landingPageTypes: ', this.landingPageTypes);
  }

public change(id) {
  // change select and index store in variable
  this.landingType = id;
  console.log(id);
}

查看示例 stackblitz

根据 select 删除存储在数组中的项目

Remove an item stored in an array based on a select

arrays

splice

typescript

angular