Template parse error

Ionic Framework ionic-v3
#1

Hello !

I’m making a hangman game, so I need to display the character '_' for each letters.

If the word is a compound word (with a whitespace), I would like to display each “word” in a different row.

I came up with an idea and and here is the code that I wanted to use, (obviously it doesn’t work and I get a template parse error :laughing:).

    <ion-grid class="guessed-word">
      <ion-row center text-center>

        <ng-container *ngFor="let char of guessedWord">

          <ng-container *ngIf="char != ' '">
            <ion-col>{{char}}</ion-col>
          </ng-container>

          <ng-container *ngIf="char == ' '">
            </ion-row>  <!-- the thing -->
            <ion-row center text-center>
          </ng-container>

        </ng-container>
        
      </ion-row>
    </ion-grid>

I understand why I get this error, but I would like to know is there is a similar way to do this. (all '_' characters that I need to display come from an array that looks like this one (that I get via an API) :

['_', '_', '_', '_', ' ', '_', '_', '_', '_', '_', '_']

I’ve tried to convert it to a multidimensional array but I didn’t manage to make it it would make all the display, letter checking, much complicated, maybe there is an easier way ?

Thank your for your help !

#2

ngIfs get checked a LOT. That wouls be an inefficient structure if you got it working. Better to create the string in the ts file, and then display the created string. Not as much fun, I know, but you’ll get better performance.

1 Like