0

I am experiencing a very weird behavior of [disabled]. I am fetching a list of firebase docs and showing them using *ngFor.

app.component.ts

export class AppComponent implements OnInit {
        postRef;
        posts = [];
        user;
        counter = 1;

        constructor( private afs: AngularFirestore ) {  }

        ngOnInit() {
            this.postRef = this.afs.collection('post');
           
            this.posts = this.postRef.valueChanges();
        }
        
        editPost(post) {
            console.log('Edit-Post : ', post.title);
        }

        canEdit(post) {
            console.log('CanEdit-Post : ', post.title);
            console.log('Counter :', this.counter++);
            return false;
        }

        deletePost(post) {
            console.log('Delete-Post : ', post.title);
        }
}

app.component.html

<div *ngFor="let post of posts | async" class="card" style="width:80%;margin: 50px 40px;">
    <h5 class="card-header">{{ post.title }}</h5>
    <div class="card-body">
        <p>{{ post.content }}</p>

        <button class="btn btn-warning is-danger" (click)="deletePost(post)"> Delete Post </button>

        <button class="btn btn-primary is-warning" [disabled]="canEdit(post)" (click)="editPost(post)"> Edit Post </button>
    </div>
</div>

canEdit() on [disabled] called so many times on page load (around 12 times, I have checked by console 'counter' in canEdit().

enter image description here

canEdit() also called on click of 'Edit Post' and 'Delete Post' button that too 6 times each. And sometimes canEdit() called automatically without any method calling or page load/refresh.

This is really weird behavior for me, anyone please explain the behavior of [disabled] here in detail.

NOTE : This behavior has nothing to do with list of post getting from firebase database collection as I have already checked this with static list of posts. I using angular v^5.0.0

Community
  • 1
  • 1
Mohsin Hasan
  • 156
  • 9
  • Its somewhat like my problem but he gave an alternate solution but what I want is just some simple explanation of this behavior of calling canEdit() many times. – Mohsin Hasan Jan 04 '18 at 10:52
  • call the canEdit() function in ngOninit instead of in your template – Arun Kumaresh Jan 04 '18 at 10:53
  • @ArunKumaresh I have to call canEdit(post) for each post to check whether the post is editable or not, how can I implement this in ngOninit and then what condition should I check to disable the button, can you please elaborate. – Mohsin Hasan Jan 04 '18 at 11:05
  • what you're doing in the canedit function – Arun Kumaresh Jan 04 '18 at 11:32
  • canEdit(post) called a service method which checks the user editing permission on that particular post. I have two firebase collection named 'User' and 'Post' have fields for user role and permission respectively. Editing permission will granted on combination of user role and user's permission on that post. – Mohsin Hasan Jan 05 '18 at 04:02
  • This has nothing to do with `disabled`, but all to do with calling a function like you do, so `canEdit` is being called on each change detection. – AT82 Jan 06 '18 at 16:55

1 Answers1

0

that's because what you write in ngOnInit you are loading posts at first / and render them using *ngFor here is the scenario when it starts rendering
he checks for each button if it is disabled at first or not, that why he calls canEdit the same number of posts
and if you try to change the posts array canEdit will called again with the same scenario

Khaled Ahmed
  • 1,074
  • 8
  • 21
  • Yes I understand that on page load canEdit() called because its checks for the disable property for the button but it gets called on every post entry when I click only on one post's edit or delete one. – Mohsin Hasan Jan 04 '18 at 10:55
  • because when you delete one post you deleted from the posts array and you bind *ngFor with posts array and that's mean that in each change in that array it will render the array again. make sure that you understand the binding here – Khaled Ahmed Jan 04 '18 at 11:24