Question

我创建了一个用于添加用户的弹出窗口。单击按钮时应显示此弹出窗口。我使用* ngIf来显示或隐藏弹出窗口。一切正常，但是当我在index.html中包含用于网格布局的引导程序时，弹出按钮时不会显示弹出窗口。任何帮助都会很棒

user.component.html

   <h2 style="margin-top: 40px;">Benutzerverwaltung</h2>
<button class="btngreen" style="margin-top: 20px" (click)="openAddPopup()">Benutzer hinzufÃ¼gen</button>

<table style="margin-top:20px; width: 100%">
      <thead>
          <tr style="background-color: #cde3b5; height: 30px; color: black; font-size: 10pt">
           <th>Nutzername</th>
           <th>Email</th> 
           <th>Vorname</th>
           <th>Nachname</th>
           <th>Status</th>
           <th>Rolle</th>
           <th>Organisation</th>
           <th>Operationen</th>
        </tr>
       </thead>
       <tbody>
        <tr *ngIf="loadingSpinner"><td colspan=8 style="text-align: center"><img src="../../loading-icon.gif"></td></tr>
           <tr *ngFor="let user of users">
               <td>{{ user.benutzername }}</td>
               <td>{{ user.email }}</td>
               <td>{{ user.vorname }}</td>
               <td>{{ user.nachname }}</td>
               <td>{{ user.status }}</td>
               <td>{{ user.rolle }}</td>
               <td>{{ user.organisation }}</td>
               <td style="width: 260px" ><button class="btngreen" style="float: right; width: 120px">Bearbeiten</button><button class="btngray" style="width: 120px; float: right; margin-right: 5px ">Kontakt</button></td>

            </tr>
       </tbody>    
</table>
<div style="height: 10px; margin-top: 10px; margin-bottom: 100px; background-color: #cde3b5"></div>


<app-add-user-popup *ngIf="addPopup"></app-add-user-popup>

usercomponent.ts

import { Component, OnInit } from '@angular/core';
import { AddUserPopupComponent } from '../add-user-popup/add-user-popup.component';
import { Http, Response } from '@angular/http';

@Component({
  moduleId: module.id,
  selector: 'app-user',
  templateUrl: 'user.component.html',
  directives: [AddUserPopupComponent],
  styleUrls: ['user.component.css'],
  providers: []
})

export class UserComponent implements OnInit {

  addPopup: boolean = false;  
  loadingSpinner: boolean = false;  

  constructor(private http: Http) { }


  ngOnInit() {

  }



  openAddPopup(){
        this.addPopup = true;
  }}

的index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sim4bgm</title>
  <base href="/">

<script src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   crossorigin="anonymous"></script>

<link rel="stylesheet" href="bootstrap.min.css" >

<script src="bootstrap.min.js"></script>

  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}

  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body style="font-family: sans-serif; background-color: #cde3b5">
  <app-root>Loading...</app-root>

    {{#each scripts.polyfills}}
    <script src="{{.}}"></script>
    {{/each}}
    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>

</body>
</html>

角度为2 * ngIf，带引导程序

0 个答案: