Angular2-为什么异步变量不能与[hidden]指令一起使用？

Question

I have links that I need to hide or show based on the services to or permissions of the current user. I have these services accessible via an Observable object and was hoping to use it in my template to determine what to hide/show.

I noticed though that this works for *ngIf but not for the [hidden] directive. I can't find any info on why this is?

Example:

@Component({
  selector: 'my-app',
  template: `
  <a href="" *ngIf="(services$ | async)?.SPECIAL_FEATURE === true">
   Save dropdown</a>

  <a href="" [hidden]="(services$ | async)?.SPECIAL_FEATURE === false">
   [Hidden] search</a>

  <a href="" [hidden]="hideOtherLink">
   The other link</a>
  `
})
export class AppComponent implements OnInit  {
  name = 'Angular 5';
  hideOtherLink = false;
  services$: Observable<object>;

  ngOnInit() {
    this.services$ = Observable.timer(2000)
      .map(() => {
        return { 
          SPECIAL_FEATURE: true,
          SPECIAL_THING: true
        }
      });

    setTimeout(() => {
      this.hideOtherLink = true;
    }, 2000);
  }

} 

Answer 1

You got confused in your conditions there.

This one means

*ngIf="(services$ | async)?.SPECIAL_FEATURE === false"

If the condition is true, then show it

While this one means

[hidden]="(services$ | async)?.SPECIAL_FEATURE === false"

If the condition is true, then hide it.

They are the opposit of each other, that's why it is "not working".

EDIT You edited your question to set the ngIf to true, So I tested it on stack and I think I got your issue.

In your hidden condition, you test if the value of SPECIAL_FEATURE is equal to false.

This means

hide the content only if the special feature variable is equal to false.

But this doesn't cover the undefined or null values, for instance, which are falsy values.

Try this :

[hidden]="!(services$ | async)?.SPECIAL_FEATURE"