В Angular 7, когда две кнопки вложены, вторая игнорируется - PullRequest
Новая
       11

В Angular 7, когда две кнопки вложены, вторая игнорируется

0 голосов
/ 20 июня 2019

В каком-то шаблоне 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>

1 Ответ

1 голос
/ 20 июня 2019

Кнопки вложения недопустимы в 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>
...