ng2-bs3-modal에 데이터를 전달하는 방법은 무엇입니까?

Question

나는 * ngFor에서 오는이 스 니펫을 여러 번 생성합니다. 모든 프로파일은 고유 ID를 가지고 있는데이 버튼을 prees 때 나는 그것을 삭제할 :

<a data-toggle="modal" data-target="#deleteProfile" (click)="deleteProfile.open()" role="button" style="color:red;"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</a> 

html로 모달 : '예'버튼을 클릭하면

<modal #deleteProfile> 
    <modal-header [show-close]="true"> 
    <h4 class="modal-title">Delete Profile</h4> 
    </modal-header> 
    <modal-body> 
    <div class="text-center"> 
     Are you sure you want to delete this profile? 
    </div> 
    </modal-body> 
    <modal-footer> 
    <div class="control-group confirm-buttons"> 
     <div class="row text-center"> 
     <div class="col-md-6"> 
      <button type="button" class="btn btn-cancel" data-dismiss="modal" (click)="closeDeleteProfile()">No</button> 
     </div> 
     <div class="col-md-6"> 
      <button type="button" class="btn btn-confirm" (click)="deleteProfile()">Yes</button> 
     </div> 
     </div> 
     <div class="col-md-12 text-center"> 
     <small>This is the footer</small> 
     </div> 
    </div> 
    </modal-footer> 
</modal> 

이

가 호출 :

deleteProfile(id: string) { 
this.modalDeleteProfile.dismiss(); 
this.profileService.delete(id) 
    .subscribe(
    // data => console.log(data), 
    // error => console.log(error) 
); 
this.router.navigateByUrl('/dashboard'); 
} 

프로필을 삭제하려면 위 코드에서 id를 얻으려면 어떻게해야합니까?

이

내가 사용하고 모달입니다 : 의견 영업 이익의 요청에 따라 https://github.com/dougludlow/ng2-bs3-modal

Answer 1

, 여기에 문제에 대한 대안 솔루션입니다. 문제는 구성 요소에 추가 메서드를 추가하여 해결할 수 있습니다.

배열을 반복하는 * ngFor가 있다고하셨습니다. 대신 직접 모달을 열고 버튼을 사용,의 프로파일의 ID를 전달하는 대신 방법을 열 수 있도록, 그래서 당신의 반복은 다음과 같이 수 :

<table> 
    <tr *ngFor="let profile of profiles"> 
    <td>{{profile.id}}</td> 
    <td>{{profile.name}}</td> 
    <td><button (click)="openDeleteModal(profile.id)">Delete Profile</button</td> 
    </tr> 
</table> 

그런 다음 openDeleteModal -method 대신 모달을 열 것 창에서 ID를 구성 요소의 로컬 변수에 바인딩 한 후 ,

<modal #deleteProfile> 
    <!-- more code here --> 
    <button type="button" class="btn btn-cancel" data-dismiss="modal" (click)="closeDeleteProfile()">No</button> 
    <button type="button" class="btn btn-confirm" (click)="deleteProfile()">Yes</button> 
    <!-- more code here --> 
</modal> 

그리고 사용자가 deleteProfile() - 버튼을 클릭하면, 우리는 전에 idForDeletingProfile에서 선택한 ID를 저장 한 :

// declare an extra variable that can be used in deletion 
idForDeletingProfile; 

openDeleteModal(id) { 
    // here we bind the chosen id, so that we can use it in your delete-method 
    this.idForDeletingProfile = id; 
    this.modalDeleteProfile.open() 
} 

그런 다음 우리는 그냥 버튼을 보여 단축 한 모달을 가지고 이제는 삭제에 사용할 수 있습니다.

deleteProfile() { 
    this.modalDeleteProfile.dismiss(); 
    // use the local variable here! 
    this.profileService.delete(this.idForDeletingProfile) 
    .subscribe(data => { 
     console.log(data); 
     this.router.navigateByUrl('dashboard'); 
    }); 
}