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

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

此html代码来自Angular 5课程：

标题：{{book.title}

作者：{{book.author}

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

相反，将第一个

按钮更改为
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>


标题：{{book.title}

作者：{{book.author}
我认为嵌套按钮不是有效的HTML。请看。您不能将按钮放在
按钮
元素中。按钮不应包含其他按钮。无关：为什么要嵌套按钮？
<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>