In my Angular2 app I am printing to the view some data in a table layout. One section of our data is an array of flags. Right now I'm successfully using a combination of *ngFor and *ngIf to print values to the view when those values exist. This is all working as expected with this code:
<ng-container *ngFor="let status of record.status">
<td *ngFor="let flag of status.flags">
<span *ngIf="flag.flag" class="standard-flag">
{{flag?.flag}}
</span>
<span *ngIf="!flag.flag" class="zero-flags">
No Flags
</span>
</td>
</ng-container>
Now, in the case where there is no data (i.e., empty arrays) I'd like to simply print "No Flags" to the screen -- see above. As far as I know, there is no "else" functionality prior to Angular 4 (correct me if I'm wrong). So what I need to do is use an *ngIf to evaluate when this is the case and print 'No Flags' to the screen accordingly.
This is proving peculiarly difficult, and I'm not sure why. I've stared at the screen for too long, and have tried numerous combinations, all to no avail.
To handle the case where there is no value in "flags", I've tried what I have now:
<span *ngIf="!flag.flag" class="zero-flags">
As well as:
<span *ngIf="flag.flag ===''" class="zero-flags">
I don't get errors, I just either get the correct value printed to the view, or, if there is no value, nothing appears at all (when what should appear is "No Flags"). What am I missing here? How could I handle this to get the desired result? Basically, I want "No Flags" to print to the view in the case where "flags" is an empty array for all 3 objects within the "status" array.
For reference, the data looks like this:
"status": [
{
"reference": "gold",
"flags": []
},
{
"reference": "silver",
"flags": []
},
{
"reference": "bronze",
"flags": [
{
"flag": "Not Available",
"flagType": "normal"
}
}
],