首页 文章

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

提问于
浏览
0

我觉得这是一个愚蠢的问题,但我无法弄清楚为什么它不起作用......

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

1 回答

  • 3

    您需要 import 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 { }
    

相关问题