[英]Can't bind 'ngIf' it isn't a known property of 'button'
I am trying to open the component in MatDialog in angular 13 & ionic 6. Here is the sample code of how I open the component in MatDialog.我正在尝试在 angular 13 & ionic 6 中打开 MatDialog 中的组件。这是我如何在 MatDialog 中打开组件的示例代码。
Here my app.module.ts
file这是我的
app.module.ts
文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { appRoutingModule } from './app-routing.module';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { DatePipe, CurrencyPipe, DecimalPipe } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { authGuard } from 'src/authentication/authGuard';
import { AngularSlickgridModule } from 'angular-slickgrid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ServiceWorkerModule } from '@angular/service-worker';
import { IonicStorageModule } from '@ionic/storage-angular';
import { QuillModule } from 'ngx-quill';
import { environment } from '../environments/environment';
export function createTranslateLoader(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}
// Fix for the issue of ModuleWithProviders<T> requires 1 type argument(s) While upgrading angular
declare module "@angular/core" {
interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
providers?: Provider[];
}
}
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule, BrowserAnimationsModule,
IonicModule.forRoot({
scrollAssist: false
}),
AngularSlickgridModule.forRoot(),
IonicStorageModule.forRoot(),
QuillModule.forRoot(),
HttpClientModule,
appRoutingModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
ServiceWorkerModule.register('/apps/ngsw-worker.js', {
enabled: environment.production,
registrationStrategy: 'registerImmediately'
})
],
providers: [
authGuard, ScreenOrientation, DatePipe, CurrencyPipe, DecimalPipe,
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
file app-routing.module.ts
文件
import { NgModule} from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { authGuard } from 'src/authentication/authGuard';
const routes: Routes = [
{
path: 'customListPage',
loadChildren: () => import('../pages/customListPage/customListPage.module').then(m => m.customListPagemodule),
canActivate: [authGuard]
},
{
path: 'customPage',
loadChildren: () => import('../core/pages/customPage/customPage.module').then(m => m.customPageModule),
canActivate: [authGuard]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'corrected' })],
exports: [RouterModule]
})
export class appRoutingModule {}
customListPage.ts
file customListPage.ts
文件
openPageAsDialog
function will trigger on button click. openPageAsDialog
function 将在单击按钮时触发。
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { customPage } from 'src/pages/customPage/customPage';
@Component({
selector: `<div><button (click)="openPageAsDialog()"></button></div>`,
templateUrl: 'CustomListPage.html'
})
export class CustomListPage implements OnInit {
constructor(public dialog: MatDialog) {}
openPageAsDialog() {
const dialogConfig = new MatDialogConfig();
this.dialog.open(customPage, dialogConfig);
}
}
customPage.html
<div class="cs-mat-ui cs-mat-custom-theme">
<mat-toolbar color="primary" class="cs-lookuptheme cs-mat-pageheadtoolbar">
<div class="cs-mat-toolbartitle">
<span class="cs-mat-pageheadtitle">
Title
</span>
</div>
<span class="example-spacer"></span>
<button color="primary" id="cspfm_weblookup_done_btn" *ngIf="multiSelectionEnabled" title="Done"
(click)="submitSelectedRecords()" class="cs-mat-icononly cs-filter-option cs-mat-pagehead-eachactions">
<em class="icon-mat-done"></em>
</button>
<button *ngIf="isSearchFilterEnabled" id="ACT_institute_d_w_search_list_filter_1" mat-mini-fab
color="primary" title="Filter" (click)="filterAction()" class="cs-mat-pagehead-eachactions cs-mat-icononly">
<em class="icon-mat-search"> </em>
</button>
</mat-toolbar>
<mat-dialog-content class="cs-mat-popup-sizeset cs-advFilter-criteria-content"
*ngIf="!isMobileUI">
<div class="cs-custom-scroll cs-dialog-scroll-body-height">
<div class="cs-lookup-norecord cs-mat-parent-slick cs-mat-main-content">
<div class="cs-mat-contentmain">
<div id="SEC_institute_d_w_search_list_listsection">
<mat-card id="pfm_slickgrid_custpagination"
class="cs-list-view cs-mat-parent-slick cs-fullpage-slickgrid">
<div class="cs-header-name cs-slick-title cs-pr">
<mat-card-header class="cs-slickoption-btn">
<mat-card-title>
Header
</mat-card-title>
</mat-card-header>
</div>
<div id="{{gridContainerId}}" *ngIf="viewReady"
class="clearfix cs-mat-slickgrid cs-slickfull-height cs-filter-beside-pagination cs_hightfix_by_script cs-fullslick-rowheight cs-mouse-pointer-enable"
[ngClass]="paginationConfigInfo && paginationConfigInfo['paginationPosition'] === 'BOTTOM' ? 'cs-adv-cri-bottom-slickheight' : 'cs-adv-cri-slickheight'">
<angular-slickgrid gridId="{{gridId}}" [columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions" [dataset]="allItems"
(onClick)="onGridItemClick($event)"
(onAngularGridCreated)="angularGridReady($event.detail)"
(onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)">
</angular-slickgrid>
</div>
</mat-card>
</div>
</div>
</div>
</div>
</mat-dialog-content>
</div>
Here my package.json
这是我的
package.json
"@angular-material-components/datetime-picker": "7.0.1",
"@angular-material-components/moment-adapter": "6.0.0",
"@angular/animations": "13.3.9",
"@angular/cdk": "13.3.9",
"@angular/common": "13.3.9",
"@angular/core": "13.3.9",
"@angular/flex-layout": "13.0.0-beta.38",
"@angular/forms": "13.3.9",
"@angular/material": "13.3.9",
"@angular/platform-browser": "13.3.9",
"@angular/platform-browser-dynamic": "13.3.9",
"@angular/router": "13.3.9",
"@angular/service-worker": "13.3.9",
"@ionic/angular": "6.2.3",
"@ionic/cordova-builders": "7.0.0",
"@ionic/storage-angular": "3.0.6",
"@material-extended/mde": "2.3.1",
"@ngx-translate/core": "13.0.0",
"@ngx-translate/http-loader": "4.0.0",
"@swimlane/ngx-datatable": "20.0.0",
"@types/hammerjs": "2.0.36",
"@types/moment-timezone": "0.5.10",
"angular-calendar": "0.28.28",
"angular-draggable-droppable": "6.1.0",
"angular-resizable-element": "4.0.0",
"angular-slickgrid": "4.3.1",
"@slickgrid-universal/common": "1.4.0",
"@slickgrid-universal/excel-export": "1.4.0",
"@slickgrid-universal/text-export": "1.4.0",
Note: I have removed the component module import in the app.module.ts file.注意:我已经删除了 app.module.ts 文件中的组件模块导入。 Since I loaded the component using the lazy-loading approach.
由于我使用延迟加载方法加载了组件。
You should add CommonModule
to your module:您应该将
CommonModule
添加到您的模块中:
import { CommonModule } from '@angular/common';
...
@NgModule({
imports: [CommonModule],
...
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.