How to check the result value in template?

Ionic Framework ionic-v3
1

Friends,

I try to show “No search result” when result is null using

<div *ngIf="result?.value == null">
          <h2>Search results</h2>
        No search results , please try
      </div>

But it’s not work…

in my controller when the Search return no result shows : ‘null’ value as alert.
My need is before submitting form no need to show “No Search results, please try” message but after search and no result show same…

Please advise . I am using ionic 3…

Anes

2

I can’t understand your conditional logic.
Can you try checking documentation for ternary operation

3

It is bad style to do this in the template. In general, keep your template clean and free of logic, so if you have a bug, you know exactly where in your file structure to look. Better to do*ngIf="searchResultsExist" where searchResultsExist is a boolean.

4

Hi Aaron,

problem in your logic is that without searching the form shows the default “No Search data found” message

<div *ngIf="!status">
            <h2>Search results</h2>
          No search results , please try
        </div>

in controller

status: boolean;
this.result = data;
 if(this.result!=null) { this.status = true;}

In default situation it’s value is false , so when form loads show that message … please
advise

5

That’s one possible explanation! Do please read the link @sujit77 gave you.

6

i feel it’s not useful in my case … i tried it no success…

7

I am guessing that result is your variable depending on which you want to show/hide No search result statement. Right?

If so, try this -

*ngIf="result == null || result == '' ? true : false"
8 
<div *ngIf="result != null && result.value == null">
      <h2>Search results</h2>
    No search results , please try
  </div>

but agree with @AaronSterling

9

It’s not working …

10

Not working on loading itself show “No Search results, please try”

11

It is because initially your result variable has not data.
Try assigning some value into it like true.

Then above condition will fail and user won’t see No result find.
Later after AJAX call you can change its value depending upon returned datas.

12 
<div *ngIf="result != null && (!result.value || result.value.length === 0)">
  <h2>Search results</h2>
  No search results , please try
</div>
13

But in my case

<h2 *ngIf="result?.length > 0">Search results</h2>

works fine … But this checking lost :frowning:

14

I am not sure regarding the logic you are using.
Is that result variable an array?

If so, try this for showing “No results” sentence -

*ngIf="result.length == 0"
15

it will cause Run time error as

Error: Template parse errors:
Parser Error: Conditional expression result?result.value requires all 3 expressions at the end of the expression [value is:{{result?result.value}}hi] in ng:///AppMod

16

Then use -

*ngIf="!result.length"

Try debugging it from your side too.
Also it will be more helpful if you mention some JavaScript codes as well.

17

Friends,

at last worked with

<div *ngIf="searchFlag && result?.length==null">
                <h2>Search results</h2>
              No search results , please try
        </div>

Thanks

Anes