MatDialog 空显示

我正在使用

问题是对话框显示为空，并且控制台没有显示错误。

即使我尝试更改dialog.component.html或dress-form.ts中的部分，也没有任何变化。

这是我打开对话框的组件（dress-form.ts）：

import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from 'src/app/dialog/dialog.component';

@Component({
  selector: 'dress-form',
  styleUrls: ['dress-form.css'],
  templateUrl: 'dress-form.component.html',
})

export class DressFormComponent {

  constructor(public dialog: MatDialog) { }
    
  openDeleteDialog() {
    const dialogRef = this.dialog.open(DialogComponent, {
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    })
  }
}

这是我的对话框组件（dialog.component.ts）：

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'dialog',
  styleUrls: ['dialog.css'],
  templateUrl: 'dialog.component.html',
})
export class DialogComponent implements OnInit {
  constructor(public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {

  }

  okToDelete() {
    this.dialogRef.close();
    console.log("this item will be deleted!")
  }
}

dialog.component.html：

<html lang="he" dir="rtl"></html>

<h2 mat-dialogititle>tile</h2>

<mat-dialog-content>
    <p>this is the content</p>
</mat-dialog-content>

<mat-dialog-actions>
    <button mat-button mat-dialog-close>cancel</button>
    <button mat-button (click)="okToDelete()">delete</button>
</mat-dialog-actions>

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule, RoutingComponent } from './app-routing.module';
import { AppComponent } from './app.component';
import { DressesComponent } from './dresses/dresses.component';
import { HttpClientModule } from '@angular/common/http';
import { DressesService } from './services/dresses.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatSelectModule } from '@angular/material/select';
import { MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { LoadingSpinnerComponent } from './ui/loading-spinner/loading-spinner.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { ButtonToggle } from './button-toggle/button-toggle.component';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { Sidenav } from './side-nav/side-nav.component';
import { MatSidenavModule } from '@angular/material/sidenav';
import { StockService } from './services/stock.service';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { TestComponent } from './test/test.component'
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';
import { UpdateStockTableComponent } from './dresses/dress-form/update-stock-table/update-stock-table.component'
import { SearchTableService } from './services/search-table.service';
import { MatSlideToggleModule } from '@angular/material/slide-toggle'
import { MatTabsModule } from '@angular/material/tabs';
import { DressDetailsComponent } from './stock/stock-form/dress-detils/dress-details.component';
import { FixesComponent } from './stock/stock-form/fixes/fixes.component';
import { DialogComponent } from './dialog/dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    DressesComponent,
    LoadingSpinnerComponent,
    ButtonToggle,
    Sidenav,
    RoutingComponent,
    TestComponent,
    UpdateStockTableComponent,
    DressDetailsComponent,
    FixesComponent,
    DialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatSelectModule,
    MatDialogModule,
    MatInputModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonToggleModule,
    MatSidenavModule,
    MatPaginatorModule,
    MatSortModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatCardModule,
    MatDividerModule,
    MatButtonModule,
    MatSlideToggleModule,
    MatTabsModule
  ],
  entryComponents: [DialogComponent],
  providers: [DressesService, StockService, SearchTableService],
  bootstrap: [AppComponent]
})
export class AppModule { }

4
投票

有完全相同的问题，但无法在任何地方找到解决方案。像你一样，我的选择器名称为“dialog”，将其更改为“app-dialog”后，它按预期工作。

0
投票

根据你的代码，问题应该出在对话框组件的html中

<html lang="he" dir="rtl"></html> // remove this line no nee for this one 

// <h2 mat-dialogititle>tile</h2>
// Change the abouve line to this line
<h2 mat-dialog-title>Install Angular</h2>

<mat-dialog-content>
    <p>this is the content</p>
</mat-dialog-content>

<mat-dialog-actions>
    <button mat-button mat-dialog-close>cancel</button>
    <button mat-button (click)="okToDelete()">delete</button>
</mat-dialog-actions>

在文档中阅读有关 Angular 中 RTL 支持的更多信息

https://material.angular.io/cdk/bidi/overview

0
投票

如果您的错误仍未解决，您可能需要检查此错误

NullInjectorError：没有 MatDialog 的提供程序 - 尝试为 MatDialog 创建包装服务

我遇到了同样的问题，所以我只是转到开发人员工具控制台（F12）。在那里我发现了真正的问题“错误错误：未捕获（承诺）：NullInjectorError：R3InjectorError（AppModule）[MatDialog -> MatDialog]： NullInjectorError：没有 MatDialog 的提供者！”

因此，您只需在 app.module.ts 导入中插入 MatDialogModule 即可，它应该可以解决此错误。希望有帮助

问题描述投票：0回答：3

3个回答

最新问题

MatDialog 空显示

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3