выберите каждый элемент, на котором должен отображаться крест, и щелчок по этому символу должен удалить элемент.

Question

• с помощью приведенного ниже кода кнопки закрытия я пытаюсь удалить каждый элемент из раскрывающегося списка в моем угловом коде. https://www.w3schools.com/howto/howto_js_close_list_items.asp
• поэтому я повторно использовал код, но он не работает.
• когда я выбираю каждый элемент, он должен показывать крестик, а нажатие на этот символ должно удалять элемент.
• Подскажите, как это исправить.
• , предоставляя мой стекаблитц ниже

https://stackblitz.com/edit/angular6-hvk4p8?file=app%2Fapp.component.ts

 ngOnInit() {

    var closebtns = document.getElementsByClassName("close");
    var i;

    for (i = 0; i < closebtns.length; i++) {
      closebtns[i].addEventListener("click", function () {
        this.parentElement.style.display = 'none';
      });
    }
  }

Answer 1

Прежде чем дать этот ответ, я должен порекомендовать вам пройти курс обучения по Angular2, поскольку очевидно, что вы пытаетесь смешивать и сопоставлять вещи, которые не следует использовать вместе. На официальном сайте Angular есть хороший учебник.

Не нужно пытаться document.getElementsByClassName; Я бы так и сделал, воспользовавшись ngFor и Angulars «привязкой к событиям», а не поиском в DOM

в компоненте:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 5';
  items = ["volvo","saab","mercedes","audi"];
  currentItem;
  ngOnInit() {

  }

  updateCurrent(selected){
    this.currentItem = selected;
    console.log(this.currentItem);
  }

  delete(itemSel: any){
    console.log(itemSel);
    var index = this.items.indexOf(itemSel);
    //if (index>-1)
    this.items.splice(index, 1);
    console.log(this.items)
  }
}

в шаблоне:

<router-outlet></router-outlet>

<select (change)="updateCurrent($event.target.value)">
    <option *ngFor="let item of items">{{item}}</option>
</select>
<div class="close" (click)="delete(currentItem)">X</div>