問題タブ [ngfor]

これは私のhtmlコードです

最初の列にはテキストが表示され、2 番目の列には別の ngFor を使用してチェックボックスが表示されます。チェックボックスのいずれかを選択すると、3 番目の列に、選択されているチェックボックスを表示したいと考えています。

選択した値を3番目の列に出力しているときに、jqueryでこれを行う方法は知っていますが、Angular2ではわかりません。テーブル内の 3 番目の列のデータがすべて変化しています。各行の 2 番目の列の値をチェックして、その特定の行の 3 番目の列に表示する必要があります。

私がここに来るのは、何時間もグーグルで調べた後、組み込みディレクティブで作成されたループに別の停止条件を使用する方法が見つからなかったからです: *ngFor.

実際には、 *ngFor は次の条件でループを終了します: index < array.length. : のような別の条件でループを終了する方法があるかどうかを知りたいですi < myVariable。

なぜ私がそれをしたいのか疑問に思っているなら、それは私がこのように作業している画像ギャラリーに取り組んでいるためです:

この例では、3 つの写真ごとに行を作成します。3 種類の行があります: - 1 つの写真を表示、 - 2 つの写真を表示、 - 3 つの写真を表示。

問題は、各行の最初の画像のインデックスが、行を表示するために使用されるインデックスよりも常に劣っていることです。したがって、すべての写真を表示できるようにしたい場合は、*ngFor の終了条件を変更できる必要があります。

ご助力ありがとうございます！

Angular 2 とtouch devicesに問題があります。特に、コンポーネントが NgFor を介してレンダリングされ、画面上で (タッチ) ドラッグされる場合。この問題は、タッチ ドラッグ中に NgFor の再レンダリングが発生した場合に発生します (NgFor にバインドされたデータを更新する外部イベントが原因で、これは私のアプリでは一般的です)。イベントのtouchmove発生が停止し、指を離して再び下に置く必要があり、これはひどいモバイル エクスペリエンスです。マウスを使用する場合、この問題は発生しません。

基本的に、私のアプリではtouchstart、コンポーネントのイベントをリッスンし、条件 (NgFor 内にはない) を介して別の「DragComponent」を表示し、イベント位置データ*ngIf="isDragging"に基づいて画面上を移動します。touchmove

なぜこれが起こるのか知っています。これは、Touch Spec のブラウザー実装によるものです。touchend通常、またはtouchcancelイベントが発生するまでDOM要素をメモリに保持することにより、バニラjsでこの問題を回避するコーディングを行います。しかし、Angular が DOM を制御するようになりました! そして、彼らはまだ使用中の要素を削除しています!

このプランカーhttp://plnkr.co/edit/QR6WDzv6NxOmn6LXTngG?p=previewをチェックして、私が説明しようとしていることをより理解してください。(タッチスクリーンが必要であることに注意するか、Chrome DevTools でタッチ エミュレーションを使用します)

また、Angular リポジトリでイシュー#9864を作成しましたが、応答がありません。最終版の準備で忙しいのは理解していますが、多くのユーザーがタッチ デバイスで Angular を使用するため、最終版の前に解決する必要があると思います。

ヒント/回避策/ハックをいただければ幸いです。プランカーを解決策で自由に更新してください。

多くのプロジェクトの配列を取得し、最後の 3 つのプロジェクトを表示したいと考えています。

私のhtmlに入った

現在、すべてのプロジェクトが表示されています (20 以上)。最後の 3 つだけを表示するにはどうすればよいですか? コードで「最後」を使用する必要があると思いますが、理解できません https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

解決：

ここで 2 つの問題を解決しました。

1) httpt.getの割り当てが間違っているため、次のエラー メッセージが表示されます。

2) Bootstrap-Select-Box のタイミングの問題。オプション フィールドが空です

1) 間違った割り当て

次の割り当ては間違っています。

そして出力を与えます：

[オブジェクト、オブジェクト、オブジェクト、オブジェクト、..]

ngForを介して反復可能ではないものは次のように修正する必要があります。

完全を期すために、これはws.get-methodです。

そしてこれは代理店です：

2) BOOTSTRAP-SELECT と ANGULAR2 のタイミングの問題

それがBootstrap-Select-Boxです（少し-CIに関して-適応バージョン）：

selectpicker のアクティブ化は次の場所で行われます。

しかし、重要なことが欠けていました。オブザーバブルがデータを出力する前に、選択ボックスがレンダリングされました。したがって、事前にエージェンシーの存在を確認してから、ボックスをレンダリングする必要があります。

それで全部です！たぶん、この情報もあなたに役立つでしょう;）

これが私のオブジェクトです (n 個の動的キーがあります。以下の例では 2 つだけ示しています)。

上記をループスローしてすべての値を出力する私の試みは次のとおりです

しかし、上記は機能していないようです。私は何を間違っていますか?正しい構文は何ですか?