ngModel 的 Angular 2/4/5 Material Dialog 问题

Question

我觉得这是一个愚蠢的问题，但我就是不明白为什么它不起作用......

我有一个材质 2 的对话框，这里是对话框组件

import { AfterViewInit, Component, Injectable } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatDialog, MatDialogRef } from '@angular/material';

import 'rxjs/add/operator/toPromise';

// services
import { DialogService } from '../../../services/dialog.service';

@Component({
  selector: 'app-dialog-asset-upload',
  templateUrl: './dialog-asset-upload.component.html',
})

@Injectable()
export class DialogAssetUploadComponent {

  constructor(private dialog: MatDialog, private dialogS: DialogService) { }

  // open dialog
  open(): Promise<any[]> {

    // open dialog
    let dialogRef = this.dialog.open(DialogAssetUploadComponentDialog, {});

    return dialogRef.afterClosed().toPromise().then(res => {

      console.log('in asset upload',res);
      return res;
    });
  }
}

@Component({
  selector: 'app-dialog-asset-upload-dialog',
  templateUrl: './dialog-asset-upload.component.html',
})
export class DialogAssetUploadComponentDialog {

  fieldValues = {};

  constructor(
    public dialogRef: MatDialogRef<DialogAssetUploadComponentDialog>,
    private dialogS: DialogService,
    ) { }

  onNoClick(): void {

    this.dialogRef.close();
  }

  save() {

    this.dialogRef.close({ fieldValues: this.fieldValues });
  }
}

对话框的 HTML 如下所示：

  <mat-dialog-content>
    <mat-checkbox [(ngModel)]="fieldValues['is_blog']">Blog</mat-checkbox>
    </mat-checkbox>
  </mat-dialog-content>

但无论我做什么，我都会收到错误消息：

Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'mat-checkbox'.
1. If 'mat-checkbox' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

缺少 FormsModule 是有道理的，但事实并非如此——我在 module.ts 文件的导入列表中有它。那么为什么对话框找不到呢？有任何想法吗？

**

已编辑...

这是我的 app.module：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

// core
import { CoreModule } from './core/core.module';

// shared app/admin
import { SharedModule } from './shared/shared.module';

// routing
import { AppRoutingModule } from './app-routing.module';

// components
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],

  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    CoreModule,
    HttpClientModule,
    SharedModule,
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

这里是shared.module：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatePipe, DecimalPipe } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule } from '@angular/material';

// dialogs
import { DialogAssetPickerComponent, DialogAssetPickerComponentDialog } from './dialogs/dialog-asset-picker/dialog-asset-picker.component';
import { DialogAssetUploadComponent, DialogAssetUploadComponentDialog } from './dialogs/dialog-asset-upload/dialog-asset-upload.component';
import { DialogConfirmComponent, DialogConfirmComponentDialog } from './dialogs/dialog-confirm/dialog-confirm.component';
import { DialogSearchFilterComponent } from './dialogs/search-filter/search-filter.component';
import { PaginateDialogComponent } from './dialogs/paginate/paginate.component';

// pipes
import { FilterPipe } from './pipes/filter.pipe';
import { ObjArrPipe } from './pipes/objarr.pipe';
import { SafehtmlPipe } from './pipes/safehtml.pipe';

// quill wysiwyg editor
import { QuillModule } from 'ngx-quill';

@NgModule({

  imports: [
    CommonModule,
    FlexLayoutModule,
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule,
  ],

  entryComponents: [
    DialogAssetPickerComponentDialog,
    DialogAssetUploadComponentDialog,
    DialogConfirmComponentDialog,
  ],

  declarations: [
    DialogAssetPickerComponentDialog,
    DialogAssetUploadComponentDialog,
    DialogConfirmComponentDialog,
    DialogSearchFilterComponent,
    FilterPipe,
    ObjArrPipe,
    PaginateDialogComponent,
    SafehtmlPipe,
  ],

  exports: [
    CommonModule,
    FilterPipe,
    FlexLayoutModule,
    FormsModule,
    ObjArrPipe,
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule,
    QuillModule,
    ReactiveFormsModule,
    SafehtmlPipe,
  ],

  providers: [
    DatePipe,
    DecimalPipe,
    DialogAssetPickerComponent,
    DialogAssetUploadComponent,
    DialogConfirmComponent,
    ObjArrPipe,
  ],

})
export class SharedModule { }

然后 admin.module 会这样做

import { SharedModule } from '../shared/shared.module';
...
  imports: [
    SharedModule,
  ],

Answer 1

您需要导入 FormsModule 以便将其用于您的依赖项；目前，您只是将其导出，而您的DialogAssetUploadComponentDialog 找不到它。这是您的共享模块的外观。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatePipe, DecimalPipe } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule } from '@angular/material';

// dialogs
import { DialogAssetPickerComponent, DialogAssetPickerComponentDialog } from './dialogs/dialog-asset-picker/dialog-asset-picker.component';
import { DialogAssetUploadComponent, DialogAssetUploadComponentDialog } from './dialogs/dialog-asset-upload/dialog-asset-upload.component';
import { DialogConfirmComponent, DialogConfirmComponentDialog } from './dialogs/dialog-confirm/dialog-confirm.component';
import { DialogSearchFilterComponent } from './dialogs/search-filter/search-filter.component';
import { PaginateDialogComponent } from './dialogs/paginate/paginate.component';

// pipes
import { FilterPipe } from './pipes/filter.pipe';
import { ObjArrPipe } from './pipes/objarr.pipe';
import { SafehtmlPipe } from './pipes/safehtml.pipe';

// quill wysiwyg editor
import { QuillModule } from 'ngx-quill';

@NgModule({

  imports: [
    CommonModule,
    FlexLayoutModule,
    FormsModule, // ADDED HERE
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule,
  ],

  entryComponents: [
    DialogAssetPickerComponentDialog,
    DialogAssetUploadComponentDialog,
    DialogConfirmComponentDialog,
  ],

  declarations: [
    DialogAssetPickerComponentDialog,
    DialogAssetUploadComponentDialog,
    DialogConfirmComponentDialog,
    DialogSearchFilterComponent,
    FilterPipe,
    ObjArrPipe,
    PaginateDialogComponent,
    SafehtmlPipe,
  ],

  exports: [
    CommonModule,
    FilterPipe,
    FlexLayoutModule,
    FormsModule,
    ObjArrPipe,
    MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule,
    QuillModule,
    ReactiveFormsModule,
    SafehtmlPipe,
  ],

  providers: [
    DatePipe,
    DecimalPipe,
    DialogAssetPickerComponent,
    DialogAssetUploadComponent,
    DialogConfirmComponent,
    ObjArrPipe,
  ],

})
export class SharedModule { }