Question

我有一个带按钮的可选列表项。

单击列表项可选择该项。单击列表项上的按钮应对所选项执行操作（在本例中为delete）。但是删除操作发生在选择之前

如何在行动前强制选择？

HTML：

<accordion [showArrows]="true" [expandAll]="true">
    <accordion-group heading="Saved Queries">
            <ul class="list-group" *ngFor="let query of userQueries" >
                <a class="list-group-item" (click)="queryClick(query)">{{query.QueryName}}
                    <span class="pull-right button-group">
                        <button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span></button>
                        <button type="button" class="btn btn-danger btn-xs" (click)="test()"><span class="glyphicon glyphicon-remove"></span></button>
                    </span>
                </a>
            </ul>       
    </accordion-group>

TS：

private queryClick(selectedQuery:UserQuery) {
        this.selectedQuery = selectedQuery;
        this.userQueryService.selectQuery(selectedQuery)
    }

    private test(){
        console.log(this.selectedQuery);
    }

Answer 1

如果要删除项目，为什么要点击之前？为什么不单击要删除的项目上的按钮删除：

<button type="button" class="btn btn-danger btn-xs" (click)="test(query)"><span class="glyphicon glyphicon-remove"></span></button>

private test(query){
    console.log(query);
    // do whatever you want
}

我认为你在这里误解，你不需要先选择一个查询才能删除它。当您单击要删除的查询旁边的按钮时，您将在方法中传递该特定查询，然后您可以使用该查询执行任何操作！：）

我认为你误解的原因如下：你的意思是，如果你先点击你的＆＃34;测试＆＃34; - 按钮，你就无法访问selectedQuery in你的测试方法，就像在下面的情况下只是console.log undefined。

private queryClick(selectedQuery:UserQuery) {
        this.selectedQuery = selectedQuery;
        this.userQueryService.selectQuery(selectedQuery)
    }

private test(){
    console.log(this.selectedQuery);
}

但是为了能够删除（或做任何事情）你必须传递给你要删除的test - 方法WHICH查询，即查看我的答案的开头，其中查询作为参数传递:)

Answer 2

简答：

你不能在行动之前强制选择＆＃34;。

答案很长：

当事件在dom中被触发传播到所有接收者的父母时，浏览器如何处理事件。

事实上，我不明白为什么你需要这样的行为，因为你可以实现这样的事情：

<accordion [showArrows]="true" [expandAll]="true">
    <accordion-group heading="Saved Queries">
            <ul class="list-group" *ngFor="let query of userQueries" >
                <a class="list-group-item" (click)="queryClick(query)">{{query.QueryName}}
                    <span class="pull-right button-group">
                        <button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span></button>
                        <button type="button" class="btn btn-danger btn-xs" (click)="delete(query)"><span class="glyphicon glyphicon-remove"></span></button>
                    </span>
                </a>
            </ul>       
    </accordion-group>
</accordion>

delete(query){
    //handle deletion
}

angular2按钮单击列表项

2 个答案:

简答：

答案很长：