我在模态页面中有<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
}
}