question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Async object inside ngxPermissionsOnly doesn't work

See original GitHub issue

Issue Description

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report 
[ ] Feature request
[ x ] Documentation issue or request

Current behavior

###Component


export class MyComponent implements OnChanges {
    @Input("id")
    id: number;
    obj: Object;

ngOnChanges(changes: SimpleChanges) {
        this.apiService.getById(changes.id.currentValue)
            .takeWhile(() => this.isAlive)
            .subscribe(res => {
                this.obj= res;
            });
    }
}

###Template

<div *ngFor="let item of obj?.list">
            <!-- 1   IT WORKS!!! -->
            <div *ngxPermissionsOnly="['ADMIN']">
                Hello World!
            </div>
            <!-- 2   IT WORKS!!!-->
            <button>
                {{item.name}}
            </button>
            <!-- 3 DOES NOT WORK!!! -->
            <div *ngxPermissionsOnly="['ADMIN']">
                <button>
                    {{item.name}}
                </button>
            </div>
</div>

First and Second example works correctly but in third the button appear empty without any text! Why?

Environment


Angular version: 4.4.3
ngx-permissions version: 3.2.4

Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
AlexKhymenkocommented, Oct 22, 2018

@fravezzimattia @kmturley Can you please try with version 6.0.4

1reaction
mariusl-acommented, Oct 17, 2018

Did you try wrap ng-container around it?

<ng-container *ngIf="community | async; let data">
	<div *ngxPermissionsOnly="['reader']">
		<p>{{ data | json }}</p>
	</div>
</ng-container>
Read more comments on GitHub >

github_iconTop Results From Across the Web

How make dynamically *ngxPermissionsOnly in angular 5?
I have created a menu dynamically and need to display according to permission but *ngxPermissionsOnly not working. Please suggest what ...
Read more >
ngx-permissions - Bountysource
when I add **ngxPermissionsOnly="['ADMIN']"* to app.component.html it works! So It's facing the problem just for child components! I tried many different ways ...
Read more >
How to Handle Errors Reactively when Using the Async Pipe
We investigate how to implement a clean and reactive approach to error handling with the async pipe in Angular.
Read more >
failed to clear cache. make sure you have the appropriate ...
This is usually as simple as running npm run eject in your project, which will walk you through the process. Make sure to...
Read more >
How to handle errors REACTIVELY with the async pipe
In this video, we take a look at how to handle errors from RxJS observable streams reactively when using the async pipe in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found