Button styles not applying with ngFor

Ionic Framework ionic-v3
1

I have some buttons that aren’t styling correctly. I have a component that has a pair of buttons in it using a ngFor. Here’s a snippet of that template:

    <div class="answers" *ngIf="!isAnswered()">
        <button full *ngFor="let answer of question.answers; let i = index" (click)="chooseAnswer(answer)" [class]="getClass(answer)">{{ answer.answerText }}</button>
    </div>

When the page first loads, here’s what I see:

image
93Vote.png842×468 13.7 KB

If I click on a button on the navigation bar and go back, it renders correctly:

image
93Vote.png732×404 11.8 KB

In fact, before the animation kicks off to bring up the new page, the style flips.

Am I doing something wrong? I tried including IONIC_DIRECTIVES as a dependency, but that didn’t work either.

2

Try to replace

*ngIf="!isAnswered()"

with

[hidden]="isAnswered()"

Maybe it’s a DOM initialization issue.

3

There’s a few problems with that approach:

  1. It isn’t idiomatic.
  2. There’s no data until ngOnInit() is called, so everything starts crashing while trying to access null.
  3. Because there’s no data, there are no buttons, so rendering still won’t occur until later. This would likely result in the same issue.