Question

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

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

，并且您的复选框位于离子项目内部，因此单击复选框也将单击传播到项目。

有2种方法可以解决此问题：

与其使用href来离子化项目，不如尝试将其用于离子标签，如果可行的话，可以直接使用href或将ion-label括在标签中。
使用事件stopPrapagation。

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

如何将复选框放入离子

1 个答案: