I have been slamming my head into a wall for hours now. I figured this would be one of the easiest things I could have done… disable a button. Sounds simple right? No matter what I do, this button will not get disabled.
The setup is quite simple, I have a view-post page where you can view a post, if you have already “liked” the post, the “like” button should be disabled. Sounds simple enough, but it doesn’t work.
Here is a very simplified version of the html for the page…
<ion-row *ngIf="style == 'new'" class="actions">
<ion-col class="sub-action" text-center>
<button ion-button icon-left clear small (click)="likePost()">
<ion-icon *ngIf="likedPost" name="heart" class="liked"></ion-icon>
<ion-icon *ngIf="!likedPost" class="color-white" name="heart-outline"></ion-icon>
</button>
</ion-col>
<ion-col class="sub-action" text-center>
<button ion-button icon-left clear small (click)="viewAllComments()">
<ion-icon class="color-white" name="chatbubbles"></ion-icon>
</button>
</ion-col>
<ion-col class="sub-action" text-center>
<button ion-button icon-left clear small (click)="repost()">
<ion-icon class="color-white" name="refresh"></ion-icon>
<ion-icon class="color-white" name="paper"></ion-icon>
</button>
</ion-col>
</ion-row>
On that last button there I want to disable it under certain conditions, so I tried
<button ion-button icon-left clear small (click)="repost()" [disabled]="post.reposted">
however, the button was not disabled. So in my ts file I decided to add a console.log in the constructor method…
ts…
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public commentsController: Comments,
public storage: Storage,
public postService: Post
) {
this.post = this.navParams.get('post');
console.log(post.reposted); //<-There is the console.log
this.lastComment = (typeof this.post.comments !== "undefined") ? this.post.comments[this.post.comments.length - 1] : null;
this.commentsCount = (typeof this.post.comments !== "undefined") ? this.post.comments.lenght : 0;
}
That logs true in the console, so I know that post.reposted is true, however the button is not disabled. So I tried something else…
<button ion-button icon-left clear small (click)="repost()" disabled="disabled">
run the page, and … the button is not disabled, in fact the disabled attribute isn’t even there. If I open the dev console in chrome and manually add the ‘disabled=“disabled”’ to the button it is disabled, but even just adding the ‘disabled=“disabled”’ in my html file, the button is still enabled. I have tried every possible combination I can think of
[disabled]=“post.reposted === true ? ‘disabled’ : null” <-Nope
disabled="{{post.reposted}}" <-Nope
[attr.disabled]=“post.reposted” <-Nope
ng-disabled=“post.disabled” <-Nope.
I even just added a variable to my class file…
export class ViewPost {
disable: boolean = true;
constructor(...) {
...
}
...
}
html…
<button ion-button icon-left clear small (click)="repost()" [disabled]="disable">
//and
<button ion-button icon-left clear small (click)="repost()" disabled="{{disable}}">
Didn’t work. Nothing works. Please help me, I am at the end of my rope here. I don’t know why I can’t just disable this darn button and I’m starting to lose my sanity on this. Thank you.
Oh, side note, if you need to know it here is the dump of my ionic info command…
Your system information:
Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.10.3
Xcode version: Not installed
