在角上显示弹出窗口的麻烦

Question

我在显示弹出窗口时遇到一些问题，弹出窗口的内容显示在页面底部。它应该在窗户上 即时通讯使用角度8。 我曾尝试安装npm我的对话框，但仍然有效。 即时通讯使用chrome作为导航器，弹出窗口没有被阻止。

这是我的代码： display.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { BooksService } from '../service/books.service';
import { BookResponse } from '../model/BookResponse';
import { Observable } from 'rxjs';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
import {MatDialog, MatDialogConfig} from "@angular/material";
import { DialogComponent } from '../dialog/dialog.component';
import { isNgTemplate } from '@angular/compiler';

export interface DialogData {
  arrBooks:BookResponse
}



@Component({
  selector: 'Adz-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.scss',
]
})

export class DisplayComponent implements OnInit {
  
 



  constructor(private bookservice: BooksService,private dialog :MatDialog){
    
}
  ngOnInit() {
   
  
  
}

openDialog(item){
this.dialog.open(DialogComponent,{
    width:'200px',
    data:item,
    
    

  })
  
  



}

div class="parent" >
   
  <ul *ngFor="let item of arrBooks  | filterAll: filterText | filterAll:filterSelect">
    <li >
      <fieldset>
<div class="div1" > 
<mat-card >
    <mat-card-header>
      <mat-card-title class="md-card-title">{{item.volumeInfo.title}}</mat-card-title>
    </mat-card-header>
    <a (click)="openDialog(item)">

    <img md-card-image src="{{item.volumeInfo.imageLinks.thumbnail}}">
    </a>
  
    <mat-card-content>
      <div class="card-text-content">
        by : {{item.volumeInfo.authors}}      </div>
    </mat-card-content>
  
    <p> {{item.volumeInfo.description | slice:0:100}}...</p>

  
  </mat-card>

</div>

</fieldset>

</li>
</ul>
  
</div>

在这里显示弹出窗口