离子：无法绑定到“ngIf”，因为它不是“div”的已知属性答案

【问题标题】：Ionic: Can't bind to 'ngIf' since it isn't a known property of 'div'离子：无法绑定到“ngIf”，因为它不是“div”的已知属性
【发布时间】：2021-10-11 23:24:08
【问题描述】：

我知道这是一个非常常见的问题，已经被问过一百万次了，但是在检查了很多论坛之后，我仍然无法解决... 始终提供的解决方案是添加“CommonModule”和“BrowserModule”，但我在我的文件中得到了这些并且没有任何变化。奇怪的是，我使用 *ngIf 的另一个文件也可以工作..

这是我的代码：

statistics.page.html

    <ion-content [fullscreen]="true">
    
      <div class="main_block">
        <p class="title">Global Statistics</p>
        <div *ngIf="testsInitialized == false" class="figures_block">
          <div class="figures_subblock">
            <p class="text">You took</p>
            <p class="figure">{{testsAmount}}</p>
            <p class="text">tests in total</p>
          </div>
        </div>
    
        <div *ngIf="testsInitialized" class="figures_block">
          <div class="figures_subblock">
            <p class="text">You took</p>
            <p class="figure">{{testsAmount}}</p>
            <p class="text">tests in total</p>
          </div>
          <div class="figures_subblock">
            <p class="text">Average score of</p>
            <p class="figure">{{testsAverage}}/5</p>
            <p class="text">for all the tests</p>
          </div>
        </div>
          <p class="title">Wall of shame</p>
          <div class="charac_block_container" *ngIf="shameIsOn">
            <div class="pepepoint_div_left">
              <img src="../../assets/img/pepePoint.png">
            </div>
            <div class="charac_block">
              <div class="block_row" *ngIf="phoneticHiraganaMistakesTable">
                <div class="charac_subblock">
                  <p class="text">Hiragana phonetic</p>
                  <p class="charac">{{phoneticHiraganaMistakesTable}}</p>
                </div>
                <div class="counter">
                  <p class="figure">x{{phoneticHiraganaMistakesAmount}}</p>
                </div>
              </div>
              <div class="block_row" *ngIf="wordHiraganaMistakesTable">
                <div class="charac_subblock">
                  <p class="text">Hiragana word</p>
                  <p class="charac">{{wordHiraganaMistakesTable}}</p>
                </div>
                <div class="counter">
                  <p class="figure">x{{wordHiraganaMistakesAmount}}</p>
                </div>
              </div>
              <div class="block_row" *ngIf="phoneticKatakanaMistakesTable">
                <div class="charac_subblock">
                  <p class="text">Hiragana phonetic</p>
                  <p class="charac">{{phoneticKatakanaMistakesTable}}</p>
                </div>
                <div class="counter">
                  <p class="figure">x{{phoneticKatakanaMistakesAmount}}</p>
                </div>
              </div>
              <div class="block_row" *ngIf="wordKatakanaMistakesTable">
                <div class="charac_subblock">
                  <p class="text">Hiragana word</p>
                  <p class="charac">{{wordKatakanaMistakesTable}}</p>
                </div>
                <div class="counter">
                  <p class="figure">x{{wordKatakanaMistakesAmount}}</p>
                </div>
            </div>
          </div>
          <div class="pepepoint_div_right">
            <img src="../../assets/img/pepePoint.png">
          </div>
        </div>
    
        <div class="charac_block_container" *ngIf="!shameIsOn">
          <div class="charac_block">
            <div class="block_row">
              <div class="charac_subblock">
                <p class="charac">No shame yet...</p>
              </div>
              
            </div>
          </div>
        </div>
    
        <ion-button (click)="clearStatsAlertConfirm()">Clear All</ion-button>
    
      </div>
    
      Coming soon...
    
      
      
    
    
    </ion-content>

statistics.page.ts


    import { StatsService } from './../service/stats.service';
    import { AlertController, ModalController } from '@ionic/angular';
    import { SettingsPage } from '../settings/settings.page';
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-statistics',
      templateUrl: './statistics.page.html',
      styleUrls: ['./statistics.page.scss'],
    })
    export class StatisticsPage implements OnInit {
    
      testsAmount: any = 0;
      testsAverage: any ="-";
      testsInitialized: boolean = false;
      phoneticHiraganaMistakesTable: string;
      wordHiraganaMistakesTable: string;
      phoneticKatakanaMistakesTable: string;
      wordKatakanaMistakesTable: string;
      phoneticHiraganaMistakesAmount: number;
      wordHiraganaMistakesAmount: number;
      phoneticKatakanaMistakesAmount: number;
      wordKatakanaMistakesAmount: number;
      isPhoneticHiraganaMistakesTable: boolean;
      isWordHiraganaMistakesTable: boolean;
      isPhoneticKatakanaMistakesTable: boolean;
      isWordKatakanaMistakesTable: boolean;
      shameIsOn: boolean;
    
      constructor(public statsService: StatsService, public alertController: AlertController, private modalController: ModalController) {}
    
      removeAll(){
        this.statsService.clearAll();
      }
    
      async ngOnInit() {
    // some code here
        }

}

statistics.module.ts


    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    
    import { IonicModule } from '@ionic/angular';
    
    import { StatisticsPageRoutingModule } from './statistics-routing.module';
    
    import { StatisticsPage } from './statistics.page';
    
    @NgModule({
      imports: [
        CommonModule,
        BrowserModule,
        FormsModule,
        IonicModule,
        StatisticsPageRoutingModule
      ],
      declarations: [StatisticsPage]
    })
    export class StatisticsPageModule {}

app.module.ts


    import { StatsService } from './service/stats.service';
    import { NativeAudio } from '@ionic-native/native-audio/ngx';
    import { Injectable, NgModule} from '@angular/core';
    import { BrowserModule} from '@angular/platform-browser';
    import { CommonModule } from '@angular/common';
    import { RouteReuseStrategy } from '@angular/router';
    
    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    
    import { AppComponent } from './app.component';
    import { AppRoutingModule } from './app-routing.module';
    
    import { HttpClientModule } from '@angular/common/http';
    
    import { SuperTabsModule } from '@ionic-super-tabs/angular';
    import { IonicStorageModule } from '@ionic/storage-angular';
    import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
    import { Drivers } from '@ionic/storage';
    
    @NgModule({
      declarations: [AppComponent],
      entryComponents: [],
      imports: [BrowserModule,
        CommonModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        HttpClientModule,
        SuperTabsModule.forRoot(),
        IonicStorageModule.forRoot({
          name: 'statsDB',
          driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB]
        }),],
      providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        {provide: NativeAudio, useClass: NativeAudio},
        StatsService,
      ],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

我也尝试重新启动 IDE，但没有成功

【问题讨论】：

显示工具输出的准确错误信息
core.js:10101 NG0303：无法绑定到“ngIf”，因为它不是“div”的已知属性。
您的应用模块中缺少 StatisticsPageModule。请在您的应用模块中导入StatisticsPageModule。
它似乎解决了这个问题，但我不明白为什么我需要导入特定页面的模块，而所有其他页面都可以正常工作而没有它

标签： angular ionic-framework

【解决方案1】：

由于@Mir entafaz Ali 已作为评论回答，您必须导入模块才能使用该组件。对于我在您的代码中看到的内容，您正在使用路由模块。这意味着您正在延迟加载页面。 你应该做什么。

在app-routing.module.ts 中，您应该正在加载选项卡。喜欢关注

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then((m) => m.TabsPageModule),
  },
]

然后，在您的tabs-routing.module.ts 中，您应该像这样导入StatisticsPageModule。

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'statistics',
        loadChildren: () => import('route/to/statistics.module').then((m) => m.StatisticsPageModule)
      },
    ]
  }
]

请注意，StatisticsPageModule 应该只导入一次，并且应该在tabs-routing.module.ts 中导入。从其他任何地方删除它。

此外，您的StatisticsPageModule 和BrowserModule 应该在您的应用程序和app.module.ts 中只导入一次。所以请务必从StatisticsPageModule 中删除这个，这应该可以修复错误。

这也应该给出这个问题的答案

我不明白为什么我需要导入特定页面的模块，而所有其他页面都可以正常工作而没有它

【讨论】：

当我仍在尝试自己解决问题时，我在 StatisticsPageModule 中添加了 BrowserModule。我只是尝试在删除 app.module.ts 中的 StatisticsPageModule 导入时删除它。不幸的是，它带回了 *ngIf 错误。考虑到我还有另一个使用 *ngIf 的页面并且有类似的配置不会给我一个错误，我真的很困惑。也许这是一个错误？因为我很确定在我更新了一些包后它开始给我错误。
@LittleOne 在任何地方删除BrowserModule，但让它进入app.module.ts。在您的app.module.ts 中导入StatisticsPageModule。我很确定 Angular 在这个上没有错误，因为你不会是第一个看到这个的人。您使用的 Angular 版本是什么？
我确实尝试了这个解决方案，它运行良好，但我昨天发布了另一个解决方案（最后一篇文章），解释了我是如何解决它的。这确实不是 Angular 错误..
@LittleOne 我确实更新了我的答案，为您提供有关您的错误的更多信息。有帮助吗？
感谢精确度，我知道我不应该复制这些模块。关于路由配置，超级标签与普通离子标签的工作方式不同，您不需要嵌套路由，因为在 <super-tab> 标记中添加每个页面时，您已经在 html 中嵌套了不同的路由。您的路由解决方案可能有效，但在 app-routing.module.ts 中设置所有内容也可以正常工作:)

【解决方案2】：

我刚刚找到了答案，这要么非常愚蠢，要么我对 Angular 的理解不足。所以看起来我没有在app-routing.module.ts 中配置统计信息的路由，这不是问题，因为我使用了超级标签模块来显示我的页面。当我为统计页面添加路由时，它突然修复了 *ngIf 错误。我的猜测是它需要预加载页面来链接一些模块？（在路由模块中有“PreloadAllModules”的导入）

【讨论】：