在主题订阅方法中调用时，Angular 5 ng-bootstrap模式无法正确显示

Question

我想在调用主题订阅方法时显示一个简单的模态。

我的appComponent类设置非常简单：

import { Component, OnInit, ViewChild } from '@angular/core';
import { AppService } from './app.service';
import { HttpClient } from '@angular/common/http';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  @ViewChild('content') content;

  constructor(private as: AppService, private http: HttpClient, private modalService: NgbModal){
    as.getError().subscribe(e => {
      console.log('err '+e);
      this.open(this.content);
    });
  }

open(content){
  this.modalService.open(content);
}

  ngOnInit(){
    this.http.get("http://localhost:8080/get/").subscribe(r => {
    console.log(r);
    });
  }
}

这是html：

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Profile update</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">Date of birth</label>
      </div>
    </form>
  </div>
</ng-template>

我正在使用errorHandler来捕获各种错误。如果抛出错误，则会捕获该错误并将其发送给服务中的主题。在构造函数中，我正在订阅主题，并希望显示带有错误的模态。 问题是它没有正确呈现它。它仅附加到页面底部，不会显示为普通对话框。

想拥有

但是得到了