无法绑定到“ngForOf”，因为它不是 Ionic / Angular 9 中“ion-item”的已知属性

Posted 2023-03-13

【中文标题】无法绑定到“ngForOf”，因为它不是 Ionic / Angular 9 中“ion-item”的已知属性

【英文标题】：Can't bind to 'ngForOf' since it isn't a known property of 'ion-item' in Ionic / Angular 9

【发布时间】：2020-10-13 05:32:38

【问题描述】：

尝试使用电话号码填充简单的无线电组列表时

无法绑定到“ngForOf”，因为它不是“ion-item”的已知属性。

问题与 Angular 9 有关。Possible solutions 说 BrowserModule 和 Common 模块需要到位。 想我明白了。 然而，错误仍然存​​在。

离子信息：

   Ionic CLI                     : 5.4.13 
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.901.4
   @angular-devkit/schematics    : 9.1.4
   @angular/cli                  : 9.1.4
   @ionic/angular-toolkit        : 2.2.0

Capacitor:
   Capacitor CLI   : 2.0.2
   @capacitor/core : 2.0.2

Cordova:
   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:
   cordova-res (update available: 0.15.0) : 0.6.0
   native-run (update available: 1.0.0)   : 0.2.8

add-number.page.ts

import  Component, Input, OnInit, ViewChild  from '@angular/core';
import  ModalController, ToastController, IonRadioGroup  from '@ionic/angular';
import  FirebaseAuthService  from 'src/app/services/auth/user/auth_user.service';
import  PlayerDetailsModel  from '../../../../models';
import  FirebasePlayerService  from '../../../../services/firebase/players/firebase-players.service';


@Component(
  selector: 'app-add-number',
  templateUrl: './add-number.page.html',
  styleUrls: [
    './styles/add-number.modal.scss',
    './styles/add-number.shell.scss',
  ],
)
export class AddNumberPage implements OnInit 
  @Input() isModalRequired = false;
  @ViewChild('radioGroup') radioGroup: IonRadioGroup;

  public availableNumbers: string[] = [];
  // radioForm: FormGroup;
  //Get value on ionSelect on IonRadio item
  selected_number: any;

  constructor(
    private _modalController: ModalController,
    private _toastController: ToastController,
    private _playerService: FirebasePlayerService,
    private _authService: FirebaseAuthService
  ) 

  

  radioGroupChange(event) 
    console.log("radioGroupChange", event.detail);
  

  radioselect(event) 
    console.log("radioSelect",event.detail);
    this.selected_number = event.detail;
  


  public dismissModal() 
    this._modalController.dismiss();
  

  private initalizeForm() 

  ngOnInit() 
    this.availableNumbers.push("[phone]")
    this.availableNumbers.push("[phone]")
    this.availableNumbers.push("[phone]")
  this.availableNumbers.push("[phone]")

  console.log(this.availableNumbers)
  // this.selected_number = this.availableNumbers[0];

   

add-number.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  FormsModule  from '@angular/forms';
import  IonicModule  from '@ionic/angular';
import  AddNumberPageRoutingModule  from './add-number-routing.module';
import  AddNumberPage  from './add-number.page';

@NgModule(
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AddNumberPageRoutingModule
  ],
  declarations: [AddNumberPage]
)
export class AddNumberPageModule 

add-number.page.html

 <ion-content class="update-user-content">
    <section class="user-details-fields fields-section">

      <ion-list>

        <ion-radio-group  name="radio-group" allow-empty-selection="true" (ionChange)="radioGroupChange($event)"  #radioGroup>
          <ion-list-header>
            <ion-label>Pick your TomLine phone number</ion-label>
          </ion-list-header>

          <ion-item *ngFor="let number of availableNumbers" (ionSelect)="radioSelect($event)">
            <ion-label>number</ion-label>
            <ion-radio slot="start"  value="number" ></ion-radio>
          </ion-item>

        </ion-radio-group>
      </ion-list>

    </section>
  </ion-content>

知道如何解决这个问题吗？

.

编辑：https://pastebin.com/pVbFa6X3app.module.ts

【问题讨论】：

你能把你的 app.module 的代码也贴出来吗？

首先重新加载您的应用程序....请关闭终端并再次提供服务，因为您的错误清楚地表明 ngForOf 不是已知属性，这没有任何意义，因为您没有使用任何 ngForOf 并且我也已经尝试过您的 ts 文件和 html ion-item 代码，它工作正常

pastebin.com/pVbFa6X3

freakyjolly.com/… 如果可行，请在此处检查您的解决方案

试过了，对我不起作用

【参考方案1】：

我遇到了同样的问题。我假设 AddNumberPage 在您的应用程序的某处被用作模式，但我看不到在哪里。由于您已将此 Modal 放在其自己的模块中，因此您必须从创建 Modal 的任何位置将该模块导入模块中。

【参考方案2】：

将页面添加到app-routingmodule.ts。

【讨论】：

成功了！你知道解释吗？我通常从路由应用程序中删除模式，我不知道为什么如果我不把它放回去，它会导致帖子中的错误？