*ngFor 在模态（Angular ionic）中不起作用答案

【问题标题】：*ngFor doesn't work in modal (Angular ionic)*ngFor 在模态（Angular ionic）中不起作用
【发布时间】：2020-07-09 14:21:21
【问题描述】：

我在离子应用程序中使用角度，但在模态中，ngForm 不起作用。我认为它显然是一个简单的代码。


    <li *ngFor="let item of [1,2,3,4,5]; let i = index">
        {{i}} {{item}}
      </li>

此代码在页面的所有其余部分中显示 ->

list

但是在模态中像这样创建

 async presentModal(test){
    const modal = await this.modalController.create({
      component: TestPage,
      componentProps: {
          test
      }
    });
    modal.onWillDismiss().then(dataReturned => {

    });
    return await modal.present();
   }

什么都不显示。任何建议为什么在模态中 *ngFor o 甚至 *ngForm 都不起作用？我缺少什么？谢谢。

PD：我可以在模态中做所有我想做的事情，比如写“你好”或模态正确显示的东西，但 ngform 不显示任何内容。

PD2：

还有 mu module.ts 以及所有我尝试导入的东西来解决这个问题...

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

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

import { TestPageRoutingModule } from './test-routing.module';

import {ReactiveFormsModule} from '@angular/forms';
import { TestePage } from './test.page';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from 'src/app/app.component';


@NgModule({
  imports: [
    BrowserModule,
    IonicModule,
    CommonModule,
    FormsModule,
    TestPageRoutingModule,
    ReactiveFormsModule
  ],
  providers: [
    BrowserModule,
    IonicModule,
    CommonModule,
    ReactiveFormsModule,
    NavController
  ],
  declarations: [TestPage],
  bootstrap: [AppComponent]
})

【问题讨论】：

标签： angular ionic-framework ngfor

【解决方案1】：

将组件添加到你的 app.module

import { ModalComponent } from './modal/modal.component';


@NgModule({
  declarations: [ModalComponent],
  entryComponents: [ModalComponent],
  
  }),
  providers: [
  ],
  bootstrap: [AppComponent]
})

查看下面的链接以获取示例

https://stackblitz.com/edit/ionic-v4-angular-modal-vxttcw?file=src%2Fapp%2Fapp.module.ts

【讨论】：