如何在离子中放置复选框

Question

我正在使用 Ionic 4 制作一个简单的 Note Maker。我无法将 CHECK BOX 放在 Ionic Label 附近。但是，当我单击复选框时，它会将我带到另一个页面，我可以在其中编辑该特定 post。但我只想select那个复选框，然后想实现多个删除。

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">

并且您的复选框位于 ion-item 内，因此单击复选框也会将单击传播到项目。

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

不要将 href 用于 ion-item，而是尝试将其用于 ion-label，如果可行，可以直接使用 href，或者将 ion-label 包含在标签中。
使用事件 stopPrapagation。

要了解事件传播，请遵循此 link。 http://logic24by7.com/angularjs-event-stoppropagation-and-event-preventdefault/

如何在离子中放置复选框

How to put checkbox in ionic

ionic-framework

ionic4