Ionic-framework: [Ionic V4.0.0-beta.7] [ion-item-sliding]配列内の要素を空にした後にスライドが機能しない

作成日 2018年09月07日  ·  30コメント  ·  ソース: ionic-team/ionic-framework

バグレポート

イオン情報
terminal / cmdプロンプトからionic infoし、以下の出力を貼り付けます。

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\fkrishna\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

バグを説明する
3つの要素の配列を作成し、そしてそのスライドアイテムのリストを表示するディレクティブ。 各アイテムには、ターゲット要素を削除するための削除ボタンがありますが、1つの要素を削除すると、残りのアイテムのスライドが停止します。

再現する手順
動作を再現する手順:

  1. 「...」に移動します
  2. クリック '....'
  3. 「....」まで下にスクロールします
  4. エラーを参照してください

関連コード

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let n of numbers; index as i">
      <ion-item>
        {{ n }}
      </ion-item>
      <ion-item-options>
        <ion-item-option " (click)="remove(i)">Delete</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
numbers = ['1','2','3'];
  constructor() {}
  remove(i) {
    this.numbers.splice(i, 1);
}

予想される行動
スライドは、要素を削除した後でも、各アイテムに対して正しく機能することを前提としています

追加のコンテキスト
問題に関連するその他の情報をすべてリストしてください。 スタックトレース、関連する問題、修正方法の提案、スタックオーバーフローリンク、フォーラムリンク、スクリーンショット、該当する場合はOSなど。

core bug

最も参考になるコメント

また、要素の動的リストで同じ問題が発生し、コンポーネントの場合、要素を更新すると、更新するまで他の要素を削除できなくなります。

調べてみると、要素を更新しなくても問題なく機能することがわかりました。ドキュメントを見ると、アイテムまたはリスト上のすべてのスライドアイテムを閉じる方法があります。 これを使用すると、問題が修正されました。

  1. イオンリストにIDを与える#dynamicList
  2. ID @ViewChild('dynamicList') dynamicList;そのリストにアクセスする
  3. <ion-item-option>をクリックすると、レコードを削除する前にdynamicList.closeSlidingItems()トリガーされます。

それまでの間、これがお役に立てば幸いです。Angularは初めてなので、愚かなことは何もしていません。

全てのコメント30件

同じ問題が発生しました。
ちなみに、スライドアイテムは削除した後は機能しません。アプリをリロードする必要があります

@ quynh-ng同じ問題があり、beta.5にダウングレードする必要がありました:(

おかしい、ちょうどその問題に着陸しただけで、スライドリストのアイテムに対するアクションで削除すると、残りのアイテムはもうスライドできなかったことを確認できました

ps:beta.8でもそうです

@ quynh-ng同じ-_-

また、要素の動的リストで同じ問題が発生し、コンポーネントの場合、要素を更新すると、更新するまで他の要素を削除できなくなります。

調べてみると、要素を更新しなくても問題なく機能することがわかりました。ドキュメントを見ると、アイテムまたはリスト上のすべてのスライドアイテムを閉じる方法があります。 これを使用すると、問題が修正されました。

  1. イオンリストにIDを与える#dynamicList
  2. ID @ViewChild('dynamicList') dynamicList;そのリストにアクセスする
  3. <ion-item-option>をクリックすると、レコードを削除する前にdynamicList.closeSlidingItems()トリガーされます。

それまでの間、これがお役に立てば幸いです。Angularは初めてなので、愚かなことは何もしていません。

すべてのヒーローがケープを着用しているわけではありません。解決策として@jcollingsを使用してください。

html:

 <ion-list #slidingList>
   <ion-item-sliding>
     <ion-item-options side="end">
        <ion-item-option (click)="delete()">
        </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 </ion-list>

ts:

 import {List} from '@ionic/angular';

 @ViewChild('slidingList') slidingList: List;

 async delete() {
   // something
   await this.slidingList.closeSlidingItems();
 }

@peterpeterparker正常に動作しますが、解決策ですか、それとも回避策ですか?

@ Anthony2539おそらく両方のビット:stuck_out_tongue_winking_eye:

機能リクエストなのかバグなのかわかりません

最近、スライドに関するコミットが行われていると思いますので、問題は解消されるかもしれません。

とにかく、回避策が機能し、私のアプリを武装させないとしましょう

e2eテストに再び合格するためにダウングレードしなければならなかったので、それはもっとバグだと思います

この問題は明らかにバグです。 アイテムを削除すると、削除する前に閉じる必要はありません。面白いです。

別の回避策は、ItemSlidingへの参照をdeleteメソッドに渡し、リストアイテムを削除する前にその1つのアイテムを閉じることです。

HTML:

<ion-list>
  <ion-item-sliding *ngFor="let item of items" #slidingItem>
    <ion-item>>
      {{item.text}}
    </ion-item>
    <ion-item-options (ionSwipe)="deleteItem(slidingItem, item)">
      <ion-button color="danger" (click)="deleteItem(slidingItem, item)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </ion-button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

TS:

async deleteItem(slidingItem: ItemSliding, item: Item) {
    slidingItem.close(); // <-- this is the important bit!
    await this.itemService.deleteItem(item);
  }

@ mimacom-klier私の問題を完全に解決してくれてありがとう。

私のために働かない!!!

closeまたはcloseSlidingItemsメソッドを呼び出すかどうかに関係なく、回避策は機能しません。
私が気付いたのは、アイテムを非表示にしてからもう一度表示した後、スライドは機能しないようですが、アイテムをスライドさせてからボタンがあるべき場所をクリックすると、実際にボタンアクションをトリガーできます。
これがStackblitzの例です。
Stackblitzでは@ionic/[email protected]を使用していますが、ローカルマシンの@ionic/[email protected]にも問題があります。

@bockoblur :Stackblitzの例を確認して、少し遊んでみました。 リストから実際にアイテムを削除した場合、回避策は正常に機能しているようです。 それらが単に非表示にされてから再び表示される場合、動作は説明したとおりです。 これは、変換の問題のようです。変換がリストアイテム要素に正しく適用されていません。 たぶん、ItemSlidingコンポーネントはまだ古いDOM参照を使用してアイテムを変換します。 私の変更した例はここにあります: https

これを調べてくれてありがとう。 それは大丈夫です。
それにもかかわらず、これはまだイオンチームによって対処される必要がある問題です...

@ mimacom-klierの回避策は、最新のIonic(4.5.0)で機能します。

編集: @jcollingsソリューションの使用は、アイテムの追加や更新にも追加で機能します。これにより、同じ問題が発生しました。 ありがとうございました!

このソリューションは、以下を使用して機能します。
Ionic CLI:4.5.0
Ionicフレームワーク:@ ionic / angular 4.0.0-beta.17

ただし、これはまだ修正が必要な問題であると私は信じています。開発者がこの動作を期待することはないと思います。

わたしも。 回避策shmorkaround。 主なことは、それが私を大きな穴から抜け出すことです、そして私はそのために

Wauw ..はこれについて一日中頭を抱えていました(リストアイテムを更新した後もスライドが機能しませんでした)。 理由がわかりました。 回避策をありがとう@jcollings 。 このバグが修正されることを願っています。

こんにちは、

以下の問題に直面しています:

問題:
イオンアイテムスライディングは初めて機能します。 イオンアイテムをスライドさせてから別のページに移動して戻ると、応答が停止します。

@jcollingsによって提案された回避策を試しました。 次のように、ビューを離れるときにスライドするすべてのイオンアイテムを閉じようとしました。

ionViewWillLeave() {
    setTimeout(async() => {
      console.log('sliding list: ', this.slidingList);
      if(this.slidingList){
        await this.slidingList.closeSlidingItems();
      }
    },1000);
  }

しかし、動作しませんでした。

私のスライダーコードは次のとおりです。

<ion-list #slidingList class="notifications" *ngIf="notificationCheck === 'true'">
    <ion-item-sliding *ngFor="let notification of notifications; index as i;">
      <ion-item lines="none" no-padding>
        <ion-row>
          <ion-col size="12" class="title">
            {{notification.title}}
          </ion-col>
          <ion-col size="12" class="description">
            {{notification.message}}
          </ion-col>
          <ion-col size="12" class="date-time">
            {{notification.createdDate | date:'medium'}}
          </ion-col>
          <i class="left-arrow"></i>
        </ion-row>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="secondary" (click)="goToURL(notification.actionURL)">
          <div slot="icon-only">
            <i class="fa fa-edit" *ngIf="notification.actionType === 'UPDATE'"></i>
            <i class="fa fa-eye" *ngIf="notification.actionType === 'VIEW'"></i>
          </div>
        </ion-item-option>
        <ion-item-option color="danger" (click)="deleteNotifications(notification.id)">
          <div slot="icon-only">
            <i class="fa fa-trash"></i>
          </div>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

最新のイオンバージョン4.0.0-rc.0で試してみました。 問題はまだ存在します。

こんにちは、

この問題を試してみたところ、私の場合、Ion Item Sliderの原因が応答しなくなったのは、ビューが変更されるたびにスライドオプションが閉じられなかったためです。 だから私は次のことをしました、そしてそれは完璧に働きました:

constructor(private location: Location,  private router: Router) {

    this.navigationSubscription = this.router.events.subscribe(async(e: any) => {
      if (e instanceof NavigationStart) {
        if(this.slidingList){
          await this.slidingList.closeSlidingItems();
        }
      }
    });

  }

@jcollingsに感謝します。

私はこれを着用しました:
.htmlで

<ion-item-sliding #slidingItem>
<ion-item-option color="danger" (click)="del(slidingItem,carte)">Supprimer</ion-item-option>
in .ts
import {  IonItemSliding } from '@ionic/angular';

async del(slidingItem: IonItemSliding, carte){
    await slidingItem.close();
    let index = this.cartes.indexOf(carte);
        if(index > -1){
            this.cartes.splice(index, 1);
        }
}

完璧に動作します
@jcollingsに感謝します。

4.0.0-rc.0で問題がまだ存在することを確認できます。

これが4.0.0-rc.1にも存在することを確認できます

このバグは4.0.0-rc.2にまだ存在します。
virtual-scroll内でion-item-slidingを使用しているため、List.closeSlidingItems()を使用できません。
アイテムのスライドを閉じずに、戻るボタンなどを使用してビューを離れると、次回はアイテムのスライドがまったく機能しなくなります。 この場合、スライドを開いてそのままにしておくため、(クリック)イベントを使用できません。 イベントをキャッチ(クリック)する変更はありません。

別の回避策。 わたしにはできる。

in .html
<ion-item-sliding>....</ion-item-sliding>

in .ts
import {  IonItemSliding } from '@ionic/angular';
  @ViewChild(IonItemSliding) itemSliding: IonItemSliding;
   ionViewWillLeave() {
        setTimeout(() => { this.itemSliding.closeOpened(); }, 500);
   }

親愛なるブランデー、

@brandyscarney見ていただけますか? 私たちはv4への移行段階にあり、イオンチームの意見を聞きたいと思います。 私に重要な問題に見えます。

本当にありがとう。
ノルベルト

タグ付けしてくれてありがとう! 調査するためにプロジェクトボードに追加しました。

@manucorporat @mhartington @paulstelzer

この問題をありがとう! これはPR#17492によって統合されました。 次のリリースになります: 4.1.0 。 それでも問題が解決しない場合はお知らせください。

問題をありがとう! この問題は、元の問題に関連しないコメントを防ぐためにロックされています。 これが最新バージョンのIonicで引き続き問題になる場合は、新しい問題を作成し、テンプレートが完全に入力されていることを確認してください。

このページは役に立ちましたか?
0 / 5 - 0 評価