离子/角度：尽管语法正确

Question

我正在开发一个具有角度的离子应用程序，并遇到以下错误：

my.page.ts（smippet）

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（smippet）

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

我期望的是，阵列中包含的字符串被映射到“离子选择”的选择选项。但是，我的浏览器控制台显示了错误ng0303：无法绑定到“ ngforof”，因为它不是“离子 - 选项”的已知属性'

在研究该错误时，我只能找到NGFOR的较旧用法（等）是否不应再使用。但是，据我所知，我已经使用了最新的语法。

我正在使用npx离子服务运行我的应用 - LAB，使用Ionic与版本6和版本13 Angular一起运行。

我还尝试了不同的组件，例如'ion-text'，但同样的错误也会发生。

另外，我验证了api-call的数据通过在HTTP-Request完成后打印在数组中正确存储。

我在做什么错？

提前致谢！

更新：

这是我的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

类型的错误无法绑定到“某物”，因为当您使用目标元素中不存在的属性或在此中不存在时，可能会发生“元素”的已知属性情况，因为您正在尝试使用找不到的属性指令。
在这种情况下，您正在尝试使用ngforof指令，但找不到它，因此您必须确保在组件的主机模块中导入该指令的主机模块。要求解此情况，您必须在模块中导入consionModule，您可以在其中声明mypage这样。

  import { CommonModule } from '@angular/common';

  @NgModule({
      declarations: [MyPage, ...],
      imports: [CommonModule, ...]
  })

编辑

对于为＆lt; ion-select-option＆gt;分配value很重要，因为默认值为undefined。
我能够在a 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

我只是想简要更新！

最终，这个问题与角度/离子有关。取而代之的是，问题是我写的要更新数组的功能是传统的，而不是箭头功能。

因此，“这个”属于不同的上下文，因此，通过覆盖UI绑定的数组，实际上创建了一个新的变量。

因此，UI不受更改的影响。将功能更改为箭头功能解决了问题。