typescript - angular 6 modal-popup med dynamiskt innehåll

I mitt projekt har jag en användarlista med omkring 50 användare. Genom att klicka på varje användarnamn ska motsvarande användarinformation visas i modal popup.

Jag vet inte hur man laddar innehållet efter Id inne i popupen i min kod.

Jag har 2 komponenter. Användarlista och användardetaljer.

<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 1</a></li>
<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 2</a></li>...

 <!-- POPUP PERSONAL DETAILS START HERE -->
<div class="modal fade" id="personal-details" role="dialog">
    <div class="modal-dialog">        
      <!-- Modal content-->
      <div class="modal-content">           
        <div class="modal-body">             
            <app-userdetails></app-userdetails> 
        </div>
      </div>
    </div>
  </div>
<!-- POPUP PERSONAL DETAILS END HERE -->

Väljaren <app-userdetails></app-userdetails> hämtades från en annan komponent (användardetaljkomponenten).

Detta är min HTML-designstruktur. På detta sätt visas modalfönstret med samma innehåll. Nu vill jag anpassa denna sektion med mina realtidsdata från databasen. Om så är fallet, hur skickar man användar-ID till en annan komponent.

Var snäll och hjälp mig att fixa detta

Svar #1

Jag skulle starkt rekommendera att titta på [ng-bootstrap][1]-biblioteket för deras modell. Den omedelbara fördelen med detta är att det tar bort beroendet av jQuery från din app, vilket kan vara besvärligt att använda inom Angular (enligt min erfarenhet)!

Med hjälp av ng-bootstrap-biblioteket kommer du att skicka in så många inparametrar som du vill

const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.user = myUserObject;
modalRef.componentInstance.title = 'My First ng-bootstrap Model';

Sammanfattningsvis skulle jag föreslå följande:

  1. Skapa en tjänst som kommunicerar med databasen, som innehåller en metod för att hämta alla användarnamn, ID:n osv. (hög nivå-information för att visa skärmen).
  2. På din första skärm, kalla på tjänsten ovan för att få den hög nivå information som behövs och visa den för användaren. (Försök att arbeta med observables och async pipe om möjligt, Todd Moto har en bra [handledning][2] om detta)
  3. När en användare klickar på ett id, använd tjänsten igen, men den här gången skickar du användarens id och får tillbaka ett användarobjekt som i sin tur kan skickas till modellen och renderas hur du vill :)

Jag hoppas att detta besvarar din fråga, hör av dig om det inte gör det. Adam

[1]:!) https://ng-bootstrap.github.io/#/components/modal/examples

[2]:!) https://toddmotto.com/angular-ngif-async-pipe

Svar #2

 The working Modal with content .I hope this is very helpful

 Angular 6 Modal Directive Component. The custom modal directive is used for 
 adding  modals anywhere in your angular application.

https://stackblitz.com/edit/angular-iybx4hangular6-custom-popup

Relaterade artiklar