クリックイベントが2回目のセマンティックUIモーダルで発生しませんでした。

アプリケーション用の意味UIを使用して角度2（rc 4）を使用しています。私は、商品リスト画面の商品リストから商品を削除する前に、セマンティックUIモーダルを使用して確認しています。機能は次の通りです： 1）削除ボタン 2）モーダルポップアップ（確認用） 3）no/denyをクリックすると、モーダルが非表示になり、productList画面に戻ります。 4）yes/approveをクリックすると、製品がリストから削除され、productList画面が更新され、2番目のモーダルが削除成功のメッセージでポップアップします。クリックイベントが2回目のセマンティックUIモーダルで発生しませんでした。

次のコードは、最初の製品が削除されたときに正常に動作しますが、別の製品の削除をクリックするとモーダルが表示されますが、モーダルのクリックイベントは発生せず、削除されました。モーダルが最初に使用された後に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); 
      }); 
    } 
}

デモ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}}" ...

クラス：私はあなたがそれぞれのモーダルの一意の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

クリックイベントが2回目のセマンティックUIモーダルで発生しませんでした。

答えて

関連する問題