Html 空显示对话框_Html_Angular_Typescript_Angular Material_Dialog

Html 空显示对话框

html angular typescript angular-material

Html 空显示对话框,html,angular,typescript,angular-material,dialog,Html,Angular,Typescript,Angular Material,Dialog,我使用教程来显示简单的对话框问题是对话框显示为空，控制台显示无错误即使我尝试从dialog.component.html或从dress-form.ts更改零件，也不会有任何更改这是我打开对话框（dress form.ts）的组件：这是我的对话框组件（dialog.component.ts）：根据你的代码，问题应该在对话框组件的html中 <html lang="he" dir="rtl"></html> // remove

我使用教程来显示简单的对话框

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

即使我尝试从dialog.component.html或从dress-form.ts更改零件，也不会有任何更改

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

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

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

//删除此行，此行无nee
//瓦片
//将abouve行更改为此行
安装有角度的
这就是内容
取消
删除

阅读更多关于angular in docs中rtl支持的信息

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

如果任一组件中没有任何更改，您是说live reload不工作吗？不，它正在工作。当我点击按钮时，我看到一个小正方形，它应该包含我所有的设计，但它是空的。@AluanHaddad嘿，谢谢你的回答！我尝试了你的解决方案，但遗憾的是显示器还是一样。

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!")
  }
}

<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>

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 { }

<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>