EventEmitter löst den korrekten Parameter nicht mit Bootstrap Modal

Question

Arbeiten mit angular2 EventEmitter mit Bootstrap modal, aber immer wenn ich einige Parameter über den Event-Emitter der Kindkomponente übergeben winkel nicht korrigiert Parameter nur im Bootstrap modal sonst alles funktioniert gut . Warum ? M tut etwas falsch?

Aufruf Kinderkomponente Codierung (Stammkomponente) -

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

Kind Komponente Codierung -

<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 für das gleiche hier http://plnkr.co/edit/2rlvpMpcTd0Gk8DelwoP?p=preview

Answer 1

Jedes ChildComponent Element verwendet die gleiche id="delete_category". Bootstrap modal verwendet der erste, der die ID entspricht, und das ist immer die erste ChildComponent mit demoInput == 1

Ändern zwei Linien fixiert es

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

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

auch den zusätzlichen attr. für Attribut Bindung bemerken.

Update

Sie einen Zufallswert für demoInput in id="delete_category{{demoInput}}" nutzen könnten.

Es scheint nicht notwendig zu sein, den gleichen Wert wie in everySecond(value) zu verwenden. Nur der in id und attr.data-target verwendete Wert muss innerhalb einer ChildComponent gleich sein, während sie gleichzeitig zwischen verschiedenen ChileComponent s unterschiedlich sein müssen.

würde ich

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}}">