Gewusst wie: übergeben von Daten zu bootstrap modal dialog, in Angular2

Ich versuche zu zeigen, bis ein Dialogfeld, in eine Eckige 2-Anwendung. Ich bin mit dem code unten. Ich bin in der Lage, öffnen Sie den dialog und nun muss ich die Daten übergeben Sie den dialog, wie kann ich das machen ?? Ich habe versucht, das schreiben von JQuery-code zu tun, sondern JQuery-code doesnt Arbeit für mich in der angular2 Anwendung.

<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</div>

InformationsquelleAutor sunny arya | 2016-05-27

  1. 6

    Einfach definieren, Daten in der Klasse und binden Sie in die interpolation syntax eckige {{ }} , Keine Notwendigkeit, zusätzliche JQuery-wie diese :- 

    Header: string = 'Angular2+Bootstrap Modal';
Text: string = "Description Here....";

    verwendet und in HTML so aus:- 

    {{Text}} and {{Header}}

    Arbeiten Plunker

    Alternativ, wenn Sie möchten, verwenden Sie diese modale Komponente und möchten Daten übergeben als Sie verwenden können Eventemitter
    hier ist ein Beispiel Beispiel Arbeiten Mit Eventemitter

    Update - Einstellung Dynamisch mit dem Wert der modalen

    Senden von Daten dynamisch zu den modal, erstellen Sie eine Komponente für das bootstrap-modal.
    als mit @Input() Sie sind in der Lage, den dynamischen Wert in der modalen wie diese :-

     @Input() header :any;

<div class="col-sm-12 col-md-6 text-center">
            <a *ngFor='#Number of data'>
                {{Number.id}} &nbsp; &nbsp; {{Number.label}} &nbsp; &nbsp;
                <delete [header]="Number.label" [pk]='Number.id'></delete><br>
            </a>
        </div>

    Arbeiten Demo der Einstellung Dynamische Wert in Modal

    update2 HTTP-Anfrage

    haben Sie, um http-Anfrage in die ngOnInit Haken eckig, Sie haben bereits Sie dynamische Daten, als Sie tun können manipulation, wie Sie wollen :-

    ngOnInit() {
    console.log(this.header);   //here is the value that you passed dynamically

    this.http.get('app/cities.json')    //making http request here 
      .map(res => res.json())
      .subscribe(res => console.log(res, "Subscribe Response"))
  }

    Beispiel arbeiten Mit dem HTTP-request

    Pardeep, das wird funktionieren, wenn Sie statische Daten. Aber in meinem Fall sind die Daten, die gesendet werden müssen, die den modalen dialog dynamisch ist, was ich habe, ist, dass ich ein label haben, und vor jedem label gibt es eine Schaltfläche, und klicken Sie auf die Schaltfläche, die ich brauche, um zu senden den Wert von label zu meinem modalen dialog.
    Überprüfen Sie meine aktualisierte Antwort @sunnyarya
    Dank pardeep, können Sie bitte teilen Sie den code auf Ihrem plunkr link.
    danke, pardeep, ich konnte sehen, wie der code, ist es in plunker
    pardeep, ich brauche mal wieder Eure Hilfe Kumpel. Ich habe meine dynamischen Wert, dass ich gehe zu meinem modalen Komponente. Meine Forderung ist, dass durch die Verwendung dieses Wertes, dass ich bestanden haben, ich habe Sie eine GET-Anforderung. Für dass, ich muss zurück zu meiner Klasse Abschnitt in meine Komponente. Wenn ich auf den button klicken, meine modal div in meinem HTML-Datei wird angezeigt, aber wie kommen Sie in mein Klasse-Bereich meiner Komponente einen Dienst aufrufen, von dort aus. In der Tat muss ich an den Eingang, ich habe bestanden, rufen Sie ein service das erste mal und dann zeige ich mein modales Dialogfeld mit den Daten, die ich von meinem Dienst.

    InformationsquelleAutor Pardeep Jain

  2. -1

    Sollten Sie nicht haben, um jquery verwenden, um Daten anzuzeigen, die in Eckige.

    Konnten Sie so etwas tun.

    @Component({
  template:`<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{modal.header}}</h4>
                </div>
                <div class="modal-body">
                    <p>{{modal.text}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</div>`
})

export class ComponentThatUSESMODAL{
   public modal = {
    "header":"MODAL HEADER",
    "text" : "MODAL TEXT"
   };
   constructor(){}
}
    Gunter, das wird funktionieren, wenn Sie statische Daten. Aber in meinem Fall sind die Daten, die gesendet werden müssen, die den modalen dialog dynamisch ist, was ich habe, ist, dass ich ein label haben, und vor jedem label gibt es eine Schaltfläche, und klicken Sie auf die Schaltfläche, die ich brauche, um zu senden den Wert von label zu meinem modalen dialog

    InformationsquelleAutor inoabrian

Schreibe einen Kommentar