问角材料部件在“物质对话”中不起作用

EN

<h1 mat-dialog-title></h1>
<div mat-dialog-content>
  <p>Enter Column Name</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal" />
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <br />
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>
    Ok
  </button>
</div>

import {
    Component,
    OnInit,
    Input,
    OnChanges,
    Output,
    EventEmitter
} from '@angular/core';
import {
    Inject
} from '@angular/core';
import {
    MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA
} from '@angular/material/dialog';
import {
    MatTableDataSource
} from '@angular/material/table';
import {
    MatSnackBar
} from '@angular/material/snack-bar';


@Component({
    selector: 'app-test',
    templateUrl: './test.html',
    styleUrls: ['./test.scss'],
})
export class MyComponent implements OnInit {

    animal: string;
    constructor() {}
    ngOnInit(): void { this.openDialog(); }

    openDialog(): void {
        const dialogRef = this.dialog.open(TitleDialogComponent, {
            width: '250px',
            data: {
                animal: this.animal
            }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log('The dialog was closed');
            console.log(result);
        });
    }


}

@Component({
    selector: 'app-title-dialog',
    templateUrl: './title-dialog.html'
})
export class TitleDialogComponent {

    constructor(
        public dialogRef: MatDialogRef < TitleDialogComponent > ,
        @Inject(MAT_DIALOG_DATA) public data) {}

    onNoClick(): void {
        this.dialogRef.close();
    }

}

import { NgModule } from '@angular/core';
import { MatStepperModule } from '@angular/material/stepper';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatSelectModule} from '@angular/material/select';
import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTableModule} from '@angular/material/table';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTabsModule} from '@angular/material/tabs';
import {MatListModule} from '@angular/material/list';
import {MatDialogModule} from '@angular/material/dialog';


@NgModule({
  imports: [
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatSelectModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatToolbarModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatTabsModule,
    MatListModule,
    MatDialogModule
  ],
  exports: [
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatSelectModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatToolbarModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatTabsModule,
    MatListModule,
    MatDialogModule
  ]
})
export class MaterialModule {}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from '../app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyComponent} from '../components/home/home.component';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { RangeSelectionDirective } from '../components/range-selection.directive';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    RangeSelectionDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    MaterialModule,
    BrowserAnimationsModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }