这两天用Ionic5做登录界面碰到一个问题很奇怪，双向绑定没有起作用，页面代码如下

<ion-list style="margin: 6px;border-radius: 3px;margin-top: 10px;z-index: 10000;">
        <ion-item style="margin-left: 0%; width: 100%; ">

          <ion-input type="text" placeholder="用户名/邮箱/手机号" [(ngModel)]="LoginName"></ion-input>

          <ion-icon name="close-circle" style="color:#ccc" (click)="clear('loginname')"></ion-icon>
        </ion-item>

        <ion-item style="margin-left: 0%; width: 100%; ">

          <ion-input type="password" placeholder="密码"  [(ngModel)]="PassWord"></ion-input>

          <ion-icon name="close-circle" style="color:#ccc" (click)="clear('password')"></ion-icon>
        </ion-item>


        <ion-button (click)="login()" expand="block">提交</ion-button>
      </ion-list>

如下图所示

检查了[(ngModel)]写法没问题，绑定的和后台也能对应上，记得之前点击清空图标的时候是可以清空输入的，提交的时候也能获取到输入值，但是后来不知道为什么就不行了。
在另一个页面上测试是可以的，基本可以确定是login这个页面的问题，一点一点的删除简化代码，后面发现是引用了IonNav，在constructer中引用了IonNav导致，

constructor(
    public navCtrl: NavController,
    public router: Router,
    public route: ActivatedRoute,
    public ionnav: IonNav,
    public toastCtrl: ToastController,
    private user: UserService) {

如果把IonNav注释掉，重新编译运行，输入后点击情况图标就可以清空输入了。
如图显示

虽然ion-input组件有clearInput属性，但是自带的样式觉得不好看，所以自己用了小图标