MatDialog 空显示答案

【问题标题】：MatDialog empty displayMatDialog 空显示
【发布时间】：2020-07-19 06:29:46
【问题描述】：

我正在使用this 教程来显示简单的对话框。

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

即使我尝试从 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 { }

【问题讨论】：

如果任何一个组件都没有变化，你是说实时重新加载不起作用吗？
不，它正在工作。当我点击按钮时，我看到应该包含我所有设计的小方块，但它是空的。
@AluanHaddad ????????????

标签： html angular typescript angular-material dialog

【解决方案1】：

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

【讨论】：

【解决方案2】：

根据您的代码，问题应该出在对话框组件的 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>

在文档https://material.angular.io/cdk/bidi/overview 中阅读有关 Angular 支持的更多信息

【讨论】：

您好，谢谢您的回答！我尝试了您的解决方案，但遗憾的是显示仍然相同。