EventEmitterはブートストラップモーダルで正しいパラメータを解決しません

Question

angular2で作業するEventEmitterブートストラップモーダルですが、子コンポーネントのイベントエミッタ角度を介していくつかのパラメータを渡すと、ブートストラップモーダルの場合にのみパラメータが修正されます。 。どうして ？何か間違っているのですか？

（親コンポーネント）をコード子コンポーネントを呼び出す -

<ul> 
    <li *ngFor='#value of abc'> 
    <child-component (everySecond)="everySecond(value)"></child-component>{{view}} 
    </li> 
</ul> 

子コンポーネントのコーディング - ここでは同じもののため

<div class="modal fade" id="delete_category" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header modal_header_color"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Delete</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="row margin_both"> 
        <div class="col-md-12"> 
         <div class="row form-group text-center"> 
          <span>Are you sure you want to Delete !</span> 
         </div> 
         <div class="row form-group"> 
          <div class="text-center"> 
           <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button> 
           <button type="button" class="btn btn-danger" (click)='call()' data-dismiss="modal">Delete</button> //not working 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete_category"> 
    <span class="glyphicon glyphicon-trash"></span> 
</button> 

    <---working ----> 
    <button (click)='call()' class='btn btn-info btn-sm'>Working Button</button> //works fine 

    <---working ----> 

plunkr http://plnkr.co/edit/2rlvpMpcTd0Gk8DelwoP?p=preview

Answer 1

各ChildComponent要素は同じid="delete_category"を使用しています。また、属性の結合のための追加attr.に気づくそれを

<button type="button" class="btn btn-danger" data-toggle="modal" 
    attr.data-target="#delete_category{{demoInput}}"> 

<div class="modal fade" id="delete_category{{demoInput}}" role="dialog"> 

を修正ブートストラップモーダルは、IDと一致していることを最初に使用し、それが demoInput == 1

は、2つの行を変更すると、常に最初ChildComponentです。

更新

あなたはid="delete_category{{demoInput}}"にdemoInputためのランダムな値を使用することができます。

everySecond(value)と同じ値を使用する必要はないようです。 idとattr.data-targetで使用される値だけがChildComponentの中で同じである必要がありますが、同時にそれらは異なったChileComponentの間で異なっている必要があります。

私はあー

class ChildComponent { 
    private static cmpId = 0; 

    // getter to make it available for binding from the template 
    // because this doesn't work with statics 
    private get componentId() => ChildComponent.prototype.cmpId++; 

    // I'm not sure if this ^^^ is the correct way to access static 
    // fields in TypeScript. 
} 

<div class="modal fade" id="delete_category{{componentId}}" role="dialog"> 

<button type="button" class="btn btn-danger" data-toggle="modal" 
    attr.data-target="#delete_category{{componentId}}">