Ionic 6导入CommonModule后*ngFor仍无法识别问题求助

问题描述 #

基于Ionic v6开发项目，需从后端请求JSON数组并以列表展示。通过ionic g page blablabla创建页面后，已在对应module.ts中导入CommonModule，控制台输出显示逻辑正常，但访问页面时控制台报错*ngFor无法识别，页面仅显示头部，列表内容空白。

相关代码 #

HTML代码

<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))
        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 {}

修复方案 #

1. 修复*ngFor语法错误 #

这是导致报错的核心原因：Angular的*ngFor语法要求使用of而非for，同时ion-list是列表容器，不应将循环指令绑定在容器上，否则会为每个数据项生成独立列表。修改后的HTML代码：

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

2. 绑定后端返回的数据 #

当前代码仅打印后端数据，未将其赋值给products数组，导致后端数据无法渲染。修改loadPages方法的成功回调：

async loadPages() {
  this.restservice.getMyMemorialPages().subscribe(
    (response) => {
      console.log(JSON.stringify(response))
      if(response.length < 1) {
        this.showEmpty();
        return;
      }
      // 将后端数据赋值给products数组
      this.products = response;
      // 若需保留原有测试数据，改用扩展运算符：
      // this.products.push(...response);
      response.forEach((data) => this.loadItem(data))
    },
    // 错误回调保持不变
    async (error) => {
      console.error('ERROR: ' + JSON.stringify(error));
      let errMsg:string;
      if(error.status == 0){
        errMsg = "服务当前不可用，请稍后重试。";
      }else{
        errMsg = error.error.error.message;
      }
      const toast = await this.toastController.create({
        message: errMsg,
        duration: 3500,
        color: 'danger',
        position: 'middle'
      });
      await toast.present();
    },
  );
}

3. 移除不必要的变更检测调用 #

loadItem方法中的this.cd.detectChanges()属于冗余代码，Angular会自动处理数据变更后的视图更新，除非组件使用了ChangeDetectionStrategy.OnPush，否则可以直接移除该调用。

内容的提问来源于stack exchange，提问作者Yorick