Question

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

error[E0277]: the trait bound `std::collections::HashMap<_, _>: std::iter::FromIterator<&(&str, &str)>` is not satisfied --> src/main.rs:4:54 | 4 | let _: HashMap<_, _> = [("key", "value")].iter().collect(); | ^^^^^^^ a collection of type `std::collections::HashMap<_, _>` cannot be built from an iterator over elements of type `&(&str, &str)` | = help: the trait `std::iter::FromIterator<&(&str, &str)>` is not implemented for `std::collections::HashMap<_, _>`

impl<K, V, S> FromIterator<(K, V)> for HashMap<K, V, S>

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>

基本上使用此代码，当我按下按钮删除项目时，仅删除数组的 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]="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

Answer 2

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

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 3

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

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

代码：

temporary：string;

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

您可以通过找到其索引来删除该项目。假设您要删除的项目是您选择的项目（已设置为模型）-'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 5

在删除消息功能中，输入要删除的项目的ID，然后使用findIndex在数组中查找该项目的索引。有了索引后，您可以使用拼接删除该索引处的条目。

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

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

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

5 个答案: