[英]Can't bind to 'ngForOf' since it isn't a known property of 'ion-item' in Ionic / Angular 9
When trying to populate simple radio group list with phone numbers尝试使用电话号码填充简单的无线电组列表时
Can't bind to 'ngForOf' since it isn't a known property of 'ion-item'.无法绑定到“ngForOf”,因为它不是“ion-item”的已知属性。
Issue is related to Angular 9. Possible solutions says that BrowserModule and Common module needs to be in place.问题与 Angular 9 有关。 可能的解决方案是 BrowserModule 和 Common 模块需要就位。 Think I got that.想我明白了。 Yet, error is still there.然而,错误仍然存在。
Ionic info:离子信息:
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 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("+16673039999")
this.availableNumbers.push("+16673039998")
this.availableNumbers.push("+16673039997")
this.availableNumbers.push("+16673039996")
console.log(this.availableNumbers)
// this.selected_number = this.availableNumbers[0];
}
}
add-number.module.ts添加编号.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 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>
Any idea how to fix this?知道如何解决这个问题吗?
. .
Edit: https://pastebin.com/pVbFa6X3 app.module.ts编辑: https://pastebin.com/pVbFa6X3 app.module.ts
I had the same problem.我有同样的问题。 I assume that AddNumberPage is being leveraged as a modal somewhere in your app, but I cannot see where.我假设 AddNumberPage 在您的应用程序的某处被用作模式,但我看不到在哪里。 Since you have placed this Modal within its own module, you have to import that module within the module from where where ever your Modal is created from.由于您已将此 Modal 放在其自己的模块中,因此您必须将该模块导入模块中,从那里创建您的 Modal。
Add the page to app-routingmodule.ts
.将页面添加到app-routingmodule.ts
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.