動的データをブートストラップモーダル角4に渡す

Question

私は情報をブートストラップモーダルに渡しているオブジェクトのリストを持っています。

<button 
class="btn btn-primary btn-xs" 
data-toggle="modal" 
data-target="#matchModal" 
(click)="matchSearch()"> 
Select</button> 

<div class="modal fade" id="matchModal" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria- 
    label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Card Matches</h4> 
    </div> 
    <div class="modal-body" *ngFor="let matchBrandCard of matchBrandCards"> 
    <div> 
     <input type="checkbox"> 
     <li>{{matchBrandCard.title}}</li> 
     <li>{{matchBrandCard.uuid}}</li> 
    </div> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-info">Create</button> 
    <button type="button" class="btn btn-success">Merge</button> 
    <button type="button" class="btn btn-default" data- 
dismiss="modal">Close</button> 
    </div> 
</div> 

更新 私のコンポーネントで：

matchBrandCards: Card[] = []; 

matchSearch() { 
this.clientCardsService.fetchBrandCards(this.clientCards.title).subscribe(
    clientCards => { 
    this.matchBrandCards = clientCards; 
    } 
); 

}

clientCards、その後に私のhttpリクエストに必要なパラメータを提供したリストですモーダルは次のようになりますmatchBrandCardsを作成します。

私の問題は、情報が初めて正しくモーダルに渡されるが、リストから他のアイテムを選択すると、モーダルが新しい選択された情報で更新されないということです。すべてが、モーダルでリストを作成するために反復処理するmatchBrandCardsを更新する作業をしていますが、表示された値はそのままです。私の希望する機能を実現する方法を探しています。

提案ヒントは非常に高く評価されます。

Answer 1

対象に、あなたのを変更し、 asyncを使用

：

updateHandler(values) { 
    this.matchBrandCards$.next(values); 
}