primeng v2.0.6 p-dialog ist kein modal in Winkel 2.4.10

Question

ich einen primeng modal v2.0.6 in einem Winkel 2.4.10 Komponente bin mit:

Das Folgende ist meine HTML-Vorlage:

<section class="content-header"> 
    <h1> 
     Dino 3D Viewer Experiment 
    </h1> 
</section> 

<!-- Main content --> 
<section #phone class="content"> 
    <button pButton id="screenshot" class="no-spinner" type="button" (click)="callAlert('screenshot')" 
      label="screenshot"></button> 
    <button pButton id="download" class="no-spinner" type="button" (click)="downloadStl()" 
      label="download geometry"></button> 
    <button pButton id="dialog" class="no-spinner" type="button" (click)="showDialog()" 
      label="open modal"></button> 
</section> 

<p-dialog header="Godfather I" [(visible)]="display" modal="modal" width="300" [responsive]="true"> 
    <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. 
     His beloved son Michael has just come home from the war, but does not intend to become part of his father's 
     business. 
     Through Michael's life the nature of the family business becomes clear. The business of the family is just 
     like the head of the family, 
     kind and benevolent to those who give respect, 
     but given to ruthless violence whenever anything stands against the good of the family.</p> 
    <p-footer> 
     <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
      <button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button> 
      <button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button> 
     </div> 
    </p-footer> 
</p-dialog> 

die folgende ist meine component.ts Datei:

@Component({ 
    selector: 'dino-viewer', 
    templateUrl: './dino-viewer.html', 
    styleUrls: ['./dino-viewer.component.css'] 
}) 
export class dinoViewerComponent { 

    display: boolean; 


    callAlert(aMessage) { 
     alert(aMessage); 
    } 

    showDialog() { 
     this.display = true; 
    } 
} 

und das folgende ist das unglückliche Ergebnis:

nach einiger Lektüre Ich habe versucht, die folgenden auf das Element hinzuzufügen:

appendTo = "body" appendTo = "@ body" appendTo = "@ (Körper)" appendToBody = "true"

aber das Modal wird nicht als modal angezeigt. Irgendein Vorschlag?

Vielen Dank für Ihre Hilfe,

Dino

Answer 1

Ich finde die Lösung für mein eigenes Problem.

Das Projekt fehlte die CSS-Bibliotheken:

• primeng/resources/Themen/Omega/theme.css

• font-ehrfürchtiges/css/font-awesome.min.css

• primeng/resources/primeng.min.css

Hoffnung hilft diese som Eone.

Answer 2

Vielleicht möchten Sie Ihre Aktualisierung PrimeNG Version versuchen. Die neueste Version ist 4.0.2. Da es sich um zwei große Updates handelt, werden wahrscheinlich auch diese und andere Bugs eingeführt.