Удалить элемент, сохраненный в массиве на основе выбора - PullRequest
Новая
       7

Удалить элемент, сохраненный в массиве на основе выбора

0 голосов
/ 30 августа 2018

Я пытаюсь удалить элемент, хранящийся в базе массива на выбранной опции, чтобы лучше понять, прочитайте этот код:

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 объект массива.

Что мне нужно : Удалить элемент, выбранный из массива.

Какие варианты у меня есть, чтобы решить проблему?

Спасибо за помощь!

Ответы [ 5 ]

0 голосов
/ 30 августа 2018

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

0 голосов
/ 30 августа 2018

Правильное решение было предоставлено @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);
 }
0 голосов
/ 30 августа 2018

Вы можете удалить элемент, найдя его индекс. предположим, что элемент, который вы хотите удалить, - это элемент, который вы выбрали (для которого задана модель) - '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']
0 голосов
/ 30 августа 2018

В вашей функции удаления сообщения укажите идентификатор элемента, который вы хотите удалить, затем найдите индекс этого элемента в массиве, используя findIndex. Если у вас есть индекс, вы можете использовать сплайс для удаления записи с этим индексом.

Я собрал этот Stackblitz в качестве примера: https://stackblitz.com/edit/angular-icpmqo

public deleteMsg(id: number) {
    this.landingPageTypes.splice(this.landingPageTypes.findIndex((page) => page.id === id), 1);
}
0 голосов
/ 30 августа 2018

Вы можете передать его так, добавить событие клика и передать индекс в качестве параметра

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