[已禁用]

Question

我遇到[disabled]非常奇怪的行为。我正在获取firebase文档列表并使用*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（）在页面加载时调用了这么多次（大约12次，我已经通过控制台检查了＆＃39;计数器＆＃39;在canEdit（）中。

  

canEdit（）也会点击＆＃39;编辑帖子＆＃39;和＆＃39;删除帖子＆＃39;每个按钮太多6次。有时canEdit（）会在没有任何方法调用或页面加载/刷新的情况下自动调用。

     

这对我来说真的很奇怪，有人请详细解释[禁用]的行为。

     

注意：此行为与从firebase数据库集合获取的帖子列表无关，因为我已经使用静态帖子列表进行了检查。我使用angular v ^ 5.0.0

Answer 1

那是因为你在ngOnInit中写的是你在第一次加载帖子/ 并使用* ngFor渲染它们 这是开始渲染时的情景 他会检查每个按钮，如果它一开始就被禁用，那就是为什么他调用canEdit相同数量的帖子
如果您尝试更改posts数组，则canEdit将使用相同的方案再次调用