Angular 2/4/5材料对话框与ngModel的问题

Question

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

我有一个material 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,
  ],

- Matt

---

通常这意味着您必须在应用程序的某个级别上将其添加到模块中，如果您将其放在 /shared 文件夹中，则可能需要将其添加到较高的位置，因为我们中的许多人都会使用它。 - Preston

请添加您的模块文件。 - Stwosch

@Stwosch和JimPreston，我已将模块文件添加到原始问题中。 - Matt

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

- Kyle Pfromer

---

我怎么没看出来？！？！我已经检查了应用模块、共享模块和管理模块50遍了。我想我该休息一下了！谢谢@Kpfromer :) - Matt

如果错误是复选框，为什么需要导入FormsModule、ReactiveFormsModule？ - skydev