событие click не запускается во второй раз по семантическому интерфейсу с моментом 2 rc4

Я использую угловой 2 (rc 4) с семантическим интерфейсом для моего приложения. Я использую семантический интерфейс для подтверждения перед удалением продукта из списка продуктов на экране productList. Ожидаемая функциональность следующая: 1) Нажмите кнопку удаления 2) Модифицированные всплывающие окна для подтверждения 3) При нажатии кнопки «Нет»/«Отклонить», «Модальные шкуры» вернитесь к экрану productList. 4) по щелчку да/одобрить, продукт удаляется из списка, а экран productList обновляется, а второй модальный появляется с удаленным успешным сообщением.событие click не запускается во второй раз по семантическому интерфейсу с моментом 2 rc4

Код, написанный ниже, работает нормально и, как ожидается, для первого продукта, который должен быть удален, но когда я нажимаю на удаление для другого продукта, модальный отображается, но событие click на модальном не запускается, и, следовательно, продукт не является удален. Не уверен, удалена ли модальная информация из DOM после ее использования в первый раз. Есть предположения? Заранее спасибо!

productList.html

` <body> 
    <table class="ui celled table"> 
     <thead> 
     <tr> 
      <th>Date Range</th> 
      <th>Name</th> 
      <th>Frequency</th> 
      <th>Actions</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr *ngFor="let product of products">    
      <td>{{ product.startDate | date: 'dd MMM y'}} - {{ product.endDate | date: 'dd MMM y' | 
       ifEmpty:'Ongoing'}} 
      </td> 
      <td>{{ product.name }}</td> 
      <td>{{ product.emailFrequency | titleCase : 1 }}</td> 
      <td> 
       <div class="ui stackable three columns grid"> 
        <div class="column"> 
         <button id="edit" class="ui icon basic button" (click)="editProduct(product)"> 
          <img src="/img/edit.svg"/> 
          <label>Edit</label> 
         </button> 
        </div> 
        <div class="column"> 
     <button id="deleteButton" class="ui icon basic button coupledModal"> 
         <img src="/img/delete-button.svg"/> 
          <label>Delete</label> 
         </button> 
    <coupledModal (onClicked)="deleteProduct($event, product)"></coupledModal> 
        </div> 
       </div> 
      </td> 
     </tr> 
     </tbody> 
    </table>

модальные-component.ts

` @Component({ 
selector: "coupledModal", 
template: ``  
    <div class="ui small first coupled modal"> 
     <div class="header">Are you sure?</div> 
     <div class="content"> 
      <div class="description"> 
      <p>If you delete this product, it will be gone forever.</p> 
      </div> 
     </div> 
     <div class="actions segments"> 
      <button class="ui basic button grey deny" (click)="onClick(false)"> 
       <i class="remove icon"></i>No thanks</button> 
      <button class="ui basic button approve" (click)="onClick(true)"> 
       <i class="checkmark icon"></i>Yes please</button> 
     </div> 
    </div> 
    <div class="ui small second coupled modal"> 
     <div class="header">Done!</div> 
     <div class="content"> 
      <div class="description"> 
       <i class="huge green check circle outline icon"></i> 
       <p>Product Deleted Successfully.</p> 
      </div> 
     </div> 
     <div class="actions"> 
      <div class="ui basic button ok"> 
       <i class="checkmark icon"></i>Done 
      </div> 
     </div> 
    </div> 
`, 
}) 
export class ConfirmModalComponent { 
@Output() public onClicked = new EventEmitter<boolean>(); 

public ngAfterViewInit() { 
    /* tslint:disable */ 
    $('.coupled.modal') 
     .modal({ 
      allowMultiple: false, 
      closable : false, 
      // detachable: false, 
      selector : { 
       close : ".close, .actions .button", 
       approve : ".actions .approve, .actions .ok", 
       deny  : ".actions .deny" 
      } 
     }); 
    // show first of linked modals 
    $('.first.modal') 
     .modal('attach events', '.button.coupledModal') 
    ; 
    // attach events to buttons 
    $('.second.modal') 
     .modal('attach events', '.first.modal .button.approve') 
    ; 
    /* tslint:enable */ 
} 

public onClick(approved) { 
    this.onClicked.emit(approved); 
} 
}`

список-component.ts

` @Component({ 
directives: [ ConfirmModalComponent], 
pipes: [TitleCase, IfEmpty, StatusFormat], 
providers: [SingleSignonDataService, ProductDataService], 
selector: "productList", 
templateUrl: "/templates/products/product-list-component.html", 
}) 

export class ProductListComponent implements OnInit { 
public products: Product[] = null; 
public model: Product; 
private dataService: ProductDataService; 

constructor(dataService: ProductDataService, 
      private cookieService: CookieService, private signinService: SingleSignonDataService, 
      private directTo: Router) { 
this.dataService = dataService;

}

public deleteProduct(userAction, product) { 
    if (userAction) { 
     this.dataService.deleteProduct(product.id) 
      .then(result => { 
       let exists = this.products.indexOf(product); 
       if (exists > -1) { 
        this.products.splice(exists, 1); 
       } 
      }) 
      .catch((error) => { 
       this.errorState = JSON.stringify(error); 
      }); 
    } 
}

Demo plunker ссылка: https://plnkr.co/edit/Wxqz5DvUES3nh4RogNnr?p=preview

источник

2016-09-21 Chandni

Ваш обработчик onButtonClick удаляется после закрытия первого всплывающего окна. Я думаю, вы должны использовать уникальный идентификатор для каждого модального:

app.component.ts

<coupledModal [id]="i" ...></coupledModal>

modal.component.ts

HTML

<div id="first-modal-{{id}}" ... 
... 
<div id="second-modal-{{id}}" ...

класса

export class ConfirmModalComponent implements AfterViewInit { 
    @Input() id; 

    public ngAfterViewInit() { 
    $('#first-modal-' + this.id, '#second-modal-' + this.id) 
     .modal({ 
     allowMultiple: false, 
     closable: false, 
     selector: { 
      approve: ".actions .approve, .actions .ok", 
      deny: ".actions .deny" 
     } 
     }); 
    // show first of linked modals 
    $('#first-modal-' + this.id) 
      .modal('attach events', '#deleteButton-' + this.id); 
     // // attach events to buttons 
    $('#second-modal-' + this.id) 
      .modal('attach events', '#first-modal-' + this.id + ' .button.approve'); 
    }

Updated Plunker

источник

2016-09-26 10:16:23 yurzui

Благодаря тонну @yurzui. Ваше решение работает хорошо. Как работа, я сделал это. https://plnkr.co/edit/SEzpCZ9cEIGfVYGrQZi9?p=preview. Проводятся здесь, чтобы другие получали выгоду – Chandni

событие click не запускается во второй раз по семантическому интерфейсу с моментом 2 rc4

ответ

Смежные вопросы