如何把复选框放在离子中

Question

我正在使用Ionic 4制作一个简单的Note Maker。我坚持将CHECK BOX放在我的离子标签附近。但是，当我点击复选框时，它会将我带到另一个页面，我可以编辑该特定帖子。但我想只选择那个复选框，然后想要实现多个删除。

Screen Shot of my app

            <ion-header>
              <ion-toolbar color="#ffbd00">
                <ion-title color="light">
                  Notes
                </ion-title>
                <ion-buttons slot="end">
                  <ion-button (click)="addNote()">
                    <ion-icon slot="icon-only" name="add" color="light"></ion-icon>
                  </ion-button>
                </ion-buttons>
              </ion-toolbar>
            </ion-header>

            <ion-content>
              <ion-grid>
                 <ion-row *ngFor="let note of notesService.notes">
                   <ion-col col-12>
                    <ion-list no-lines>
                      <ion-item-sliding>
                      <ion-list>
                        <ion-item button detail  [href]="'/notes/' + note.id" routerDirection="forward" color="#810000">
                        <ion-label>{{ note.title }}</ion-label>
                        <ion-checkbox slot="end"></ion-checkbox>
                        </ion-item>
                      </ion-list>
                    </ion-item-sliding>
                    </ion-list>
                    </ion-col>
                </ion-row>
              </ion-grid>
            </ion-content>

Answer 1

这是因为你把href放到你的ion-item

 <ion-item button detail  [href]="'/notes/' + note.id" routerDirection="forward" color="#810000">                       

并且您的复选框位于离子项内，因此单击复选框也会点击项目。

有两种方法可以解决这个问题：

1. 而不是使用href到离子项尝试将其用于离子标签，如果它起作用或者通过在标签中包含离子标签，可以是直接href。
2. 使用事件stopPropagation。

要了解事件传播，请点击此链接。 http://logic24by7.com/angularjs-event-stoppropagation-and-event-preventdefault/