我正在做一个运行在ionic v6上的项目。我们从后端请求一个json项数组，并需要在列表中显示它。为此，我们将数组加载到我们的类中的变量中：blablabla. page. ts。然后在我们的html中：我们显示这个页面。我们还有一个blablabla. module. ts。
此页面是使用以下命令创建的：离子G页blablabla。
于飞：

<ion-header>
  <ion-toolbar>
    <ion-title>overviewMemorialPages</ion-title>
  </ion-toolbar>
</ion-header>
    
<ion-content>
  <div class="MemorialPageHeader">
    

    <ion-list *ngFor="let product for products">
      <ion-item>
        <h1>Hellooo!!!</h1>
        {{product.name}}
      </ion-item>
      
    </ion-list>
  </div>
</ion-content>

page.ts

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ToastController } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { RestService } from 'src/app/service/rest.service';

@Component({
  selector: 'app-overview-memorial-pages',
  templateUrl: './overview-memorial-pages.page.html',
  styleUrls: ['./overview-memorial-pages.page.scss'],
})
export class OverviewMemorialPagesPage implements OnInit {

  products: any [] = [{
    name: "test product"
  }];

  constructor(
    private router:Router, 
    private toastController:ToastController, 
    private translate:TranslateService, 
    public restservice:RestService,
    private cd: ChangeDetectorRef,
    ) { 
    }

  ngOnInit() {
    this.loadPages();

    this.products.push({name: "hi"});
    console.log(JSON.stringify(this.products));
  }

  showEmpty() {

  }

  loadItem(data: any) {
    console.log(data.name)
    console.log(data.description)
    console.log('view-memorial-page?id=' + data.id)
    this.cd.detectChanges();
  }

  async loadPages() {
    this.restservice.getMyMemorialPages().subscribe(
      (async (response) => {
        console.log(JSON.stringify(response))
        // response.body.array.forEach(element => {
        //   console.log(JSON.stringify(element))
        // });

        if(response.length < 1) {
          this.showEmpty();
          return;
        }

        response.forEach((data) => this.loadItem(data))

      }),
      (async (error) => {
        console.error('ERROR: ' + JSON.stringify(error));
          let errMsg:string;

          if(error.status == 0){
            errMsg = "The service is currently unavailable. Please try again later.";
          }else{
            errMsg = error.error.error.message;
          }

          const toast = await this.toastController.create({
            message: errMsg,
            duration: 3500,
            color: 'danger',
            position: 'middle'
          });
          await toast.present();
      }),
    );
  }

}

这里的所有代码都工作得很好，所有控制台输出都显示它按预期工作。
Module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { OverviewMemorialPagesPageRoutingModule } from './overview-memorial-pages-routing.module';

import { OverviewMemorialPagesPage } from './overview-memorial-pages.page';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    OverviewMemorialPagesPageRoutingModule,
    TranslateModule
  ],
  declarations: [OverviewMemorialPagesPage],
})
export class OverviewMemorialPagesPageModule {}

在这里您可以看到我们已经导入了CommonModule！！
当我去查看页面时，我的控制台中出现以下错误：enter image description here并且不显示列表中的任何项目，只显示一个只有页眉的空白页。