如果离子切换处于模态,Ionic2 [(ngModel)]会冻结离子

时间:2017-07-31 14:58:54

标签: ionic2

我在模态页面中有<ion-toggle>的代码,但是当我进入页面时,它会冻结Ionic,我需要将其关闭以使其再次运行。当我离开绑定时,<ion-toggle>显示正确。在同一页面上是使用ngModel的表单。

<ion-item>
  <ion-label>public</ion-label>
  <ion-toggle (ionChange)="togglePublic()" [(ngModel)]="newComment.public"></ion-toggle>
</ion-item>

了解问题可能是什么?

完整的HTML。

<ion-content padding>
  <ng-container *ngIf="timer">
    <ng-container *ngIf="addingComment">
      <ion-card-header text-center class="new-comment">
        {{newComment.author}}
      </ion-card-header>
      <ion-card-content>
        <form [formGroup]="commentGroup">
          <ion-textarea placeholder="" clearInput formControlName="comment" [(ngModel)]="newComment.message"></ion-textarea>
          <ion-item *ngIf="commentGroup.controls['comment'].hasError('minlength') && commentGroup.controls.comment.touched" class="invalid">
            <p>The comment needs to be at least 4 characters</p>
          </ion-item>

          <ion-item *ngIf="commentGroup.controls['comment'].hasError('maxlength') && commentGroup.controls.comment.touched" class="invalid">
            <p>The max lengt is 140 characters</p>
          </ion-item>

          <ion-item *ngIf="commentGroup.controls['comment'].hasError('required') && commentGroup.controls.comment.touched" class="invalid">
            <p>A comment is required!</p>
          </ion-item>
        </form>
        <ion-item>
          <ion-label>public</ion-label>
          <ion-toggle (ionChange)="togglePublic()" [(ngModel)]="newComment.public"></ion-toggle>
        </ion-item>
        <p class="text-center">{{sToTime(newComment.time)}}</p>
        <ion-buttons end>
          <button (tap)="cancelComment()" color="danger" ion-button small>cancel</button>
          <button (tap)="postComment()" ion-button small>post</button>
        </ion-buttons>
      </ion-card-content>
    </ng-container>
    <ion-card *ngFor="let comment of commentsToDisplay" class="comment ">
      <ng-container *ngIf="!comment.remove && !comment.addComment">
        <ion-card-header class="text-center">
          {{comment.author}}
        </ion-card-header>
        <ion-card-content>
          <p>{{comment.message}}</p>
          <p class="text-center">{{sToTime(comment.time)}}</p>
        </ion-card-content>
      </ng-container>
      <ng-container *ngIf="comment.remove && !comment.addComment">
        <div class="fadeout">
          <ion-card-header class="text-center">
            {{comment.author}}
          </ion-card-header>
          <ion-card-content>
            <p>{{comment.message}}</p>
            <p class="text-center">{{sToTime(comment.time)}}</p>
          </ion-card-content>
        </div>
      </ng-container>
    </ion-card>
  </ng-container>

</ion-content>

这里是TS构造函数,其中要绑定的this.newComment.public是在其中定义的。

  constructor(public viewCtrl: ViewController, public navParams: NavParams, public authService: AuthService, public commentData: CommentData) {
    this.isSerie = navParams.get('isSerie');
    this.media = navParams.get('media');
    this.comments = [];
    this.commentsToDisplay = [];
    this.commentGroup = new FormGroup({ comment: new FormControl('', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(140)])) });
    this.forwardingTimer = Observable.timer(0, 250);
    this.newComment = {
      message: '',
      author: this.authService.currentUser.user_name,
      time: this.originalTime,
      public: true
    }
  }

0 个答案:

没有答案