Angular(Ionic)应用中输入框插值表达式失效问题求助

问题分析 #

你的代码存在两个核心问题导致输入框无法显示User的username属性：

1. *ngIf语法错误：*ngIf="let user of User"是错误写法，*ngIf仅用于条件渲染，不能声明变量并遍历数组/对象；若User是单个对象，直接判断其是否存在即可；若为数组需遍历，应使用*ngFor。
2. 输入框未绑定值：你没有将输入框与user.Username做数据绑定，因此插值表达式无法作用到输入框内容上。

修复后的代码示例 #

情况1：User是单个对象 #

如果组件中的User是单个用户对象（比如User: UserModel = { Username: 'xxx' }），修改模板如下：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Meus dados</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 直接判断User是否存在，无需额外声明变量 -->
  <form *ngIf="User">
    <ion-item lines="full" class="formItem">
      <ion-label position="floating">用户名</ion-label>
      <!-- 使用双向绑定[(ngModel)]，支持读取和修改属性值 -->
      <ion-input type="text" required [(ngModel)]="User.Username" name="username"></ion-input>
    </ion-item>
   
    <ion-row>
      <ion-col>
        <ion-button type="submit" color="primary" expand="block" [routerLink]="['/']">Salvar</ion-button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

情况2：User是用户数组 #

如果组件中的User是用户数组（比如User: UserModel[] = [{ Username: 'xxx' }, ...]），需用*ngFor遍历：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Meus dados</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 用*ngFor遍历数组，声明user变量 -->
  <form *ngFor="let user of User">
    <ion-item lines="full" class="formItem">
      <ion-label position="floating">{{user.Username}}</ion-label>
      <ion-input type="text" required [(ngModel)]="user.Username" name="username-{{user.id}}"></ion-input>
    </ion-item>
   
    <ion-row>
      <ion-col>
        <ion-button type="submit" color="primary" expand="block" [routerLink]="['/']">Salvar</ion-button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

额外注意事项 #

• 使用[(ngModel)]时，必须在对应模块（如HomeModule或AppModule）中导入FormsModule：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [
    IonicModule,
    FormsModule // 必须导入此模块才能使用ngModel
  ],
  declarations: [YourComponent]
})
export class YourModule {}

• 若仅需单向显示值（无需修改），可使用[value]="user.Username"替代[(ngModel)]，此时无需导入FormsModule。

内容的提问来源于stack exchange，提问作者matheus