角材料组件在“材料对话框”

Question

我在对话框中使用mat-form-field，mat-dialog-close和ng-model属性。但是它的抛出错误表示输入/按钮的未知属性。

title-dialog.html

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

MyComponent.ts

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();
    }

}

我在这里错过了什么吗？我已将所有材料导入都包含在app.module.ts中，并将其很好地用于其他组件中。

获取这些错误

编辑1：

我要在这里导入材料组件

Material.module.ts

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

我只有一个模块，没有子模块，而我的app.module.ts是

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

Answer 1

编辑：只是注意到public class MainActivity extends AppCompatActivity implements CustomizeDialog.IntentProvider { // field declarations go here @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = findViewById(R.id.image); // instantiating the dialog final CustomizeDialog dialog = new CustomizeDialog(); findViewById(R.id.button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // showing the dialog on click dialog.show(getSupportFragmentManager(),""); } }); } // via this method I receive the intent from the dialog // I know intent might not be the best option for this function but let's let it be here for now @Override public void getIntent(Intent intent) { ratio = intent.getFloatExtra("ratio",3); isCustom = intent.getBooleanExtra("isCustom",false); orientation = intent.getStringExtra("orientation"); launchChooser(); } } 中没有声明您的TitleDialogComponent。这可能是主要原因-.-

在AppModule中，

app.module.ts

对于以下情况：最好添加参考。尽管以上内容足以解决您的问题。

您的模块导入似乎正确。也就是说，从错误消息中很明显，@NgModule({ declarations: [ AppComponent, HomeComponent, RangeSelectionDirective, TitleDialogComponent // <------- Add this ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, AppRoutingModule, MaterialModule, BrowserAnimationsModule, FlexLayoutModule ], providers: [], bootstrap: [AppComponent] }) 没有注册任何模块。我对这个问题的猜想是，无需模棱两可的玩法，便是打开Modal的方式。

尝试将目标模式作为其父组件的属性进行引用，如下所示：

TitleDialogComponent