Ionic/Angular：无法绑定到"ngForOf"，尽管语法正确

Question

我正在用Angular开发一个Ionic应用程序，遇到了以下错误:

my.page。ts(片段)

export class MyPage implements OnInit {
public myArray: Array<string> = [];
constructor(){}
ngOnInit(){
this.updateArray();
}
updateArray() {
// Performs API Call and puts the results into 'myArray'
}
}

my.page.html(片段)

<ion-select interface="popover">
<ion-select-option *ngFor="let item of myArray">{{item}}</ion-select-option>
</ion-select>

我期望的是，数组中包含的字符串映射到'ion-select'的选择选项。但是，我的浏览器控制台显示错误NG0303: Can't bind to 'ngForOf' since it isn't a known property of 'ion-select-option'

当研究这个错误时，我所能找到的是ngFor (item of myArray等)的旧用法，不应该再使用。但是，就我所理解的，我已经使用了最新的语法。

我使用npx ionic serve --lab运行我的应用程序，使用版本6的Ionic和版本13的Angular。

我也尝试了不同的组件，如'ion-text'，但出现相同的错误。

此外，我还通过在http-request完成后打印API-Call的数据来验证它是否正确地存储在数组中。

我做错了什么?

提前感谢!

更新:

我的my.app.module-file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { MyPageRoutingModule } from './my-routing.module';
import { MyPage } from './my.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
MyPageRoutingModule
],
declarations: [MyPage]
})
export class MyPageModule {}

Answer 1

当您使用目标元素中不存在的属性时，可能会出现Can't bind to 'something' since it isn't a known property of 'element'类型的错误，或者在这种情况下，因为您试图使用无法找到的属性指令。在这种情况下，你试图使用ngForOf指令，但它找不到，所以你必须确保你在组件的主机模块中为该指令导入主机模块。要解决这种情况，您必须在像这样声明MyPage的模块中导入CommonModule。

import { CommonModule } from '@angular/common';
@NgModule({
declarations: [MyPage, ...],
imports: [CommonModule, ...]
})

编辑

为<ion-select-option>分配value很重要，因为默认值是undefined。我能够在stackblitz上重现您的问题，并且在没有分配value时得到相同的错误。

Answer 2

你需要调用ngIf来确保在你的myArray数据准备好之前数据没有被加载。

改变你的HTML代码如下检查是否有数据存在于你的数组，如果没有，它将保持隐藏和不活动，直到有一个数据。

<ion-select *ngIf="myArray.length > 0" interface="popover">
<ion-select-option *ngFor="let item of myArray">{{item}}</ion-select-option>
</ion-select>

Answer 3

我只是想给一个简短的更新!

最终，这个问题与Angular/ionic无关。相反，问题是我写的更新数组的函数是一个传统的函数，而不是一个箭头函数。

因此，'this'属于不同的上下文，所以通过重写UI绑定的数组，实际上创建了一个新变量。

因此UI不受更改的影响。将函数改为箭头函数解决了这个问题。