我想以 angular 顯示一個對話框以確認洗掉操作，但該框沒有出現，它附加到頁面的末尾，這是我的對話框組件 ts 檔案：
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export class DeleteBoxComponent implements OnInit {
constructor(private dialogRef: MatDialogRef<DeleteBoxComponent>,
@Inject(MAT_DIALOG_DATA) public data: CBookModel,
private service: BookService) { }
onNoClick(){
this.dialogRef.close();
}
onYesClick(){
this.service.delete(this.data.id).subscribe(response => {
this.dialogRef.close();
})
}
}
這是對話框組件的 html 檔案：
<div >
<h1 mat-dialog-title>DELETE</h1>
<mat-dialog-content >
<p>Are you Sure you want to delete "{{data.title}}"</p>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="onNoClick()">No</button>
<button mat-button (click)="onYesClick()">Yes</button>
</mat-dialog-actions>
</div>
這是另一個呼叫對話框組件的組件：
import { DeleteBoxComponent } from './../delete-box/delete-box.component';
import { MatDialog } from '@angular/material/dialog';
export class BooksComponent implements OnInit {
constructor(private service: BookService,public router:Router, public dialog: MatDialog) { }
onClickDelete(book: CBookModel){
const dialogRef = this.dialog.open(DeleteBoxComponent,
{width: '250px',backdropClass: 'backdropBackground', data: book});
dialogRef.afterClosed().subscribe(Response =>{
this.service.getAll()
.subscribe(data => this.books = data);
})
}
圖片
uj5u.com熱心網友回復：
根據您的螢屏截圖，我認為您尚未配置 Material 樣式。
按照入門指南，它將被設定。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362689.html
標籤：有角的
上一篇：NGRX效果未存盤正確資料