Dynamische Daten an Bootstrap modal angular übergeben 4

Question

Ich habe eine Liste von Objekten, denen ich Informationen von einem Bootstrap-Modal weiterleite. Modal sieht wie folgt aus:

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

aktualisieren In meiner Komponente:

matchBrandCards: Card[] = []; 

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

}

clientCards ist die Liste, die die notwendigen Parameter für meine HTTP-Anforderung stellt, um dann create matchBrandCards.

Mein Problem ist, dass die Informationen beim ersten Mal korrekt an das Modal übergeben werden, aber wenn ich andere Elemente aus der Liste auswähle, wird das Modal nicht mit den neuen ausgewählten Informationen aktualisiert. Alles funktioniert mit der Aktualisierung der MatchBrandCards, die ich überspringe, um die Liste im Modal zu erstellen, aber die angezeigten Werte bleiben gleich. Auf der Suche nach einem Weg, um meine gewünschte Funktionalität zu erreichen.

Vorschläge || Tipps würden sehr geschätzt werden.

Answer 1

Ihre zu einem Thema wechseln und async verwenden:

<div class="modal-body" *ngFor="let matchBrandCard of matchBrandCards$ | async"> 

in der enthaltenden Komponente:

public matchBrandCards$ = new Subject(); 

und dann, wenn Sie ein Update haben:

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