CODEWITHSUNDEEP
javascriptarraysangulartypescript
Muirik
Muirik

Reputation: 6289

Not Getting Expected Result in Negative Case with *ngIf in Angular 2 App

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"
            }
    }
],

Upvotes: 4

Views: 516

Answers (4)

robbannn
robbannn

Reputation: 5013

If there is no flags in status.flags you will never hit the statement that prints "No flags". You can't iterate an empty array. Use an *ngIf to check if there are any flags in status.flags first. If not print "No flags".

<ng-container *ngFor="let status of record.status">
    <div *ngIf="status.flags.length > 0">
        <td *ngFor="let flag of status.flags"> 
            <span *ngIf="flag.flag" class="standard-flag">
                {{flag?.flag}} 
            </span>
        </td>
    </div>
    <div *ngIf="status.flags.length < 1">
        <td>
            <span *ngIf="!flag.flag" class="zero-flags">
                No Flags
            </span>
        </td>
    </div>
</ng-container>

Upvotes: 3

Muralikrishnan
Muralikrishnan

Reputation: 56

Print 'flag.flag' and see its value.If you look at below samples.Any values such as '',null,undefined can also make your section vanish 

 <span *ngIf="''" class="zero-flags">
                    No Flags -- wont work
                </span> 
                <span *ngIf="null" class="zero-flags">
                    No Flags  -- wont work
                </span> 
                <span *ngIf="undefined" class="zero-flags">
                    No Flags  -- wont work
                </span>
                <span *ngIf="false" class="zero-flags">
                    No Flags 
                </span> 
                <span *ngIf="true" class="zero-flags">
                    No Flags
                </span>

Upvotes: -1

John Montgomery
John Montgomery

Reputation: 7096

*ngFor will only run if there is data in the array. Otherwise, everything inside it is ignored, so your "No Flags" markup is never being read at all.

Try moving it outside of the *ngfor and writing it like this:

<td *ngIf="!status.flags.length">
    <span class="zero-flags">
        No Flags
    </span>
</td>

Upvotes: 3

Hareesh
Hareesh

Reputation: 6900

Try this

<span *ngIf="flag.flag !== '';else noFlag" class="standard-flag">
    {{flag?.flag}} 
</span>

<ng-template #noFlag>No Flags</ng-template>

Upvotes: 0

Related Questions