Clever Geek Handbook

Not getting expected result in negative case with * ngIf in Angular 2 app

In my Angular2 app I am printing some data in a table layout to view. One section of our data is an array of flags. I am currently successfully using a combination *ngFor

and *ngIf

to print values ​​in the view when those values ​​exist. It all works with code like this:

    <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 that there is no data (ie empty arrays), I would like to just print "No flags" on the screen - see above. As far as I know, there is no feature "yet" before Angular 4 (correct me if I'm wrong). So what I need to do is use *ngIf

it to evaluate when this is the case and print "No checkboxes" on the screen accordingly.

It's very complicated and I'm not sure why. I stared at the screen for too long and tried many combinations, all to no avail.

To handle the case where there is no value in the "checkboxes" I tried what I have:

<span *ngIf="!flag.flag" class="zero-flags">

As well as:

<span *ngIf="flag.flag ===''" class="zero-flags">

I don't get any errors, I just get the correct value printed in the view, or if there is no value, nothing appears at all (when "No flags" should appear). What am I missing here? How can I handle this to get the desired output? Basically, I want "No Flags" to print the view when "flags" are an empty array for all three objects in 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"
            }
    }
],
+3


source to share


4 answers


If status.flags

there are no flags, you never hit the statement that prints the No Flags checkbox. You cannot iterate over an empty array. Use *ngIf

to check if there are any flags in status.flags

. 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>
+3


source


*ngFor

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

Try to move it outside *ngFor

and write it like this:



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


source


try it

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

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


source


Print out the flag.flag and see its meaning. If you take a look below the samples. All values ​​like '', null, undefined can also make your section equal to zero

 <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>
-1


source






More articles:


All Articles