无法绑定 'ngIf' 它不是 'button' 的已知属性

Question

我正在尝试在 angular 13 & ionic 6 中打开 MatDialog 中的组件。这是我如何在 MatDialog 中打开组件的示例代码。

这是我的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文件

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文件

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>

这是我的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",

注意：我已经删除了 app.module.ts 文件中的组件模块导入。 由于我使用延迟加载方法加载了组件。

Answer 1

您应该将CommonModule添加到您的模块中：

import { CommonModule } from '@angular/common'; 

...

@NgModule({
  imports: [CommonModule],
  ...
})