Why is angular view not getting updated here?-CodePudding

I have a div tag like this:

  <div [hidden]="reviewable && !suggestionIsRejected" >
    <i [hidden]="reviewMessage === '' || reviewMessage === undefined || reviewMessage === null" ></i>
    <strong>Review message: </strong>{{ reviewMessage }}
  </div>

Now, as you can see, I am checking on a reviewMessage variable to show a loading indicator if it's empty, otherwise show it's contents. What I see instead is both of them on the screen, i.e. both the loading indicator as well as the message. Why is it happening this way?

CodePudding user response：

You don't need to do individual value checking, as both '', undefined and null result in falsy, just having to negate the variable's value.

Also, your logic is reversed. You will only want to hide when there is some value.

Try:

<div [hidden]="reviewable && !suggestionIsRejected" >
  <i [hidden]="reviewMessage" ></i>
  <strong [hidden]="!reviewMessage">Review message: </strong>{{ reviewMessage }}
</div>

I don't know how the rest of your logic is, but possibly you would also need to put the <i [hidden]="reviewMessage" ></i> outside the div.