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

Posted

技术标签:

【中文标题】ngModel 的 Angular 2/4/5 Material Dialog 问题【英文标题】：Angular 2/4/5 Material Dialog problems with ngModel 【发布时间】：2018-05-20 21:08:33 【问题描述】：

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

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

【问题讨论】：

通常这意味着您必须在应用程序的某个级别将其添加到您的模块中，如果您将它放在我们许多人使用的 /shared 文件夹中，可能会很高。 请添加您的模块文件 @Stwosch 和 JimPreston 我将模块文件添加到原始问题中 【参考方案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

【讨论】：

我怎么没看到？！？！我查看了应用程序模块、共享模块和管理模块 50 次。我想我应该休息一下！谢谢@Kpfromer :) 如果错误是复选框，为什么需要导入FormsModule、ReactiveFormsModule？

以上是关于ngModel 的 Angular 2/4/5 Material Dialog 问题的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Angular 2 的 [(ngModel)] 中获取数字？ [复制]

Angular 2 单选按钮验证与 ngModel

无法将 [(ngModel)] 绑定到 Angular html

如何检测选择标签（Angular 2）上对 ngModel 的更改？

使用 ngModel 的 Angular 2 双向绑定不起作用

使用 ngModel 的 Angular 2 双向绑定不起作用