X (значок закрытия) внутри элемента кнопки не работает в IE11 (Angular 7) - PullRequest
Новая
       15

X (значок закрытия) внутри элемента кнопки не работает в IE11 (Angular 7)

0 голосов
/ 02 марта 2020

Наши элементы кнопок, сгенерированные * ngFor l oop, имеют внутри значок x. Для chrome он работает правильно, его функция состоит в том, чтобы удалить эту кнопку в пользовательском интерфейсе. Когда я проверил IE, проверив его элемент, кажется, что значок не был кликабельным. Единственный кликабельный - это родительский элемент, который является самой кнопкой.

Оригинальный код следующий: 

//On its HTML     
<button class="btn btn-outline-primary btn-sm float-left button-loop" *ngFor="let loop of loops">{{loop}}
        <i class="fa fa-times-circle child-icon" (click)="removeloop(loop)"></i>
</button>    

///On its TS file
loop = ['loop1', 'loop2', 'loop3']

Я не помещал код внутри removel oop функция, потому что я думаю, что эта проблема все о проблеме HTML / кросс-браузер только. Я попробовал приведенные ниже коды, но я уверен, что это не лучшие практики, и я использовал его только как временное решение, потому что я так застрял в этом вопросе: (

//On its HTML
      <div *ngFor="let loop of loops">
        <button class="btn btn-outline-primary btn-sm float-left button-loop" >{{loop}}
          <i class="fa fa-times-circle" (click)="removeloop(loop)"></i>
       </button>
      </div>

В его файле TS я добавил приемник событий щелчка. Поэтому я планирую получить приблизительное местоположение, в котором событие щелчка вызывается для этого указанного c элемента (кнопки). Сначала нужно получить , если браузер IE или нет Во-вторых, нужно получить отношение ширины кнопки к месту / скоординированному, где произошло событие нажатия. 

//ON its TS file
  @HostListener('document:click', ['$event'])
  public onDocumentClick(event: MouseEvent): void {
      const targetElement = event.target as HTMLElement;
      let parameterBtn = targetElement.classList.contains('button-loop'); //check if the clicked button is in the *ngFor loop
      let isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent); //check if IE


      //check the ratio, I set 0.90 because it means that it is more right part of the button clicked (which is where the x icon located)
      let ratio = event.offsetX / targetElement.offsetWidth;

      if(ratio > 0.90 && parameterBtn){ 
     //so if the click event happens on more right part of the button AND the button is generated by the ngFor loop
     //Then the icon (child element of the button) will be programmatically clicked.

        targetElement.firstElementChild.click() 
     //I am stuck in this part :( I just want to click the <i class="fa fa-times-circle child-icon" (click)="removeloop(loop)"></i>
      }
 }

Пожалуйста, помогите мне в этом вопросе :( У меня заканчивается решение ... Заранее спасибо.

...