インバートアングラー 2 *ngFor
2023-07-26 12:49:04
質問
<li *ngFor="#user of users ">
{{ user.name }} is {{ user.age }} years old.
</li>
ngForを反転させて、アイテムを下から上に追加することは可能でしょうか?
どのように解決するのですか?
JavaScriptの配列のリバースメソッドを利用したカスタムパイプを実装する必要があります。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'reverse' })
export class ReversePipe implements PipeTransform {
transform(value) {
return value.slice().reverse();
}
}
という風に使うことができます。
<li *ngFor="let user of users | reverse">
{{ user.name }} is {{ user.age }} years old.
</li>
コンポーネントのpipes属性にパイプを追加することを忘れないでください。
関連
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] インデックスを属性値とするngFor
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み】Angular 2 ルート変更時に上部にスクロールさせる
-
[解決済み】Angular 2 - NgForは、コレクションの代わりに数字を使用します。
-
[解決済み】*ngIfと*ngForが同じ要素にあるとエラーになる件
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] angular4 / typescriptでdocument.getElementByIdの置き換え?
-
[解決済み] AngularでFormArrayからすべての項目を削除する
-
[解決済み] 遅延のあるobservableを作成するには?
-
[解決済み] FormGroupとFormArrayの使い分けは?
-
[解決済み] angular keyvalue pipe sort properties / iterate in order (アンギュラーキーバリューパイプソートプロパティ / イテレートオーダー)
-
[解決済み] コンストラクタ注入を行わずにサービスのインスタンスを取得する
-
[解決済み] 新しいAngularでngSrcに相当するものは何ですか?
-
[解決済み] angular 4 ユニットテストエラー `TypeError: ctor is not a constructor`.
-
[解決済み] Angular2 ルーターがクエリ文字列を保持する