在 Angular 7 中，当嵌套两个按钮时，第二个按钮被忽略答案

【问题标题】：In Angular 7 when two buttons are nested the second one is ignored在 Angular 7 中，当嵌套两个按钮时，第二个按钮被忽略
【发布时间】：2019-06-20 15:02:00
【问题描述】：

在某些 Angular 7 模板中，我嵌套了两个按钮（单击）。第二个是不可点击的：第一个只回答（点击）。如何设置第二个按钮可点击？

此 html 代码来自 Angular 5 课程：https://openclassrooms.com/fr/courses/4668271-developpez-des-applications-web-avec-angular/5091266-creez-une-application-complete-avec-angular-et-firebase

<button
    class="list-group-item"
    *ngFor="let book of books; let id = index"
    (click)="onViewBook(id)">
    <h3 class="list-group-item-heading">
    Titre : {{ book.title }}
<!-- ignored code starts here -->
    <button class="btn btn-default pull-right"
        (click)="onDeleteBook(book)">
        <span class="glyphicon glyphicon-minus"></span>
    </button>
<!-- end of ignored code -->
    </h3>
    <p class="list-group-item-text">
    Auteur : {{ book.author }}</p>
</button>

【问题讨论】：

我认为嵌套按钮不是有效的 HTML。看看this post。
您不能将按钮放在button 元素中。一个按钮并不意味着包含其他按钮。
无关：为什么要嵌套按钮？

标签： html angular button nested

【解决方案1】：

嵌套按钮在 HTML 中无效，就像 @ConnorsFan 之前评论的那样。

改为将第一个 button 更改为 div。这样您的 UX + UI 将完美运行。

<div
    class="list-group-item"
    *ngFor="let book of books; let id = index"
    (click)="onViewBook(id)">
    <h3 class="list-group-item-heading">
    Titre : {{ book.title }}
<!-- ignored code starts here -->
    <button class="btn btn-default pull-right"
        (click)="onDeleteBook(book)">
        <span class="glyphicon glyphicon-minus"></span>
    </button>
<!-- end of ignored code -->
    </h3>
    <p class="list-group-item-text">
    Auteur : {{ book.author }}</p>
</div>

【讨论】：