Angular: ternary operator in ngFor throw error Can't bind to 'ngFor' since it isn't a known property of 'div'

Question

I have in my code a ngFor loop in a div that looks like that:

  <div formArrayName="i===0 ? 'viaOut' : 'viaIn' " fxLayout="row" fxLayoutGap="20px" *ngIf="viaOut">
        <div *ngFor="i===0 ? 'let via of newRequest.controls.roundway.controls[i].controls.viaOut.controls; let j=index' : 'let via of newRequest.controls.roundway.controls[i].controls.viaIn.controls; let j=index' ">

Before using the ternary operator, I only had a simple ngFor and a normal formArrayName, it worked perfectly, but when I changed to this it stopped working and I get in my browser console the error:

Uncaught Error: Template parse errors:
Can't bind to 'ngFor' since it isn't a known property of 'div'. ("me="i===0 ? 'viaOut' : 'viaIn' " fxLayout="row" fxLayoutGap="20px" *ngIf="viaOut">
            <div [ERROR ->]*ngFor="i===0 ? 'let via of newRequest.controls.roundway.controls[i].controls.viaOut.controls; let j="): ng:///AppModule/NouvelledemandeComponent.html@132:17
Property binding ngFor not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". 

Also, I already import BrowserModule (and it works well as everything worked before I used ternary operator)

Thank you

Answer 1

You can't assign strings or code to *ngFor loop, although it seems like a for-loop, it really just takes takes an NgIterable , anything iterable like an array, not code. So you can't use ternary operator.

For instance, if you feed it an array, it will work

let a of list

When you add even just parenthesis, it'll break

(let a of list)