[解決済み] AngularでngFor repeatをある数のアイテムに制限するにはどうすればよいですか?
2022-04-24 20:20:20
質問
私のコード
<li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)">
<template [ngIf]="i<11">{{item.text}}</template>
</li>
私は、任意の時点で10個のリスト要素のみを表示させようとしています。このため 回答はこちら 私はngIfを使用しましたが、この結果、空のリスト項目(10を超えて)がページに表示されます。
解決方法を教えてください。
この方が簡単だと思うのですが
<li *ngFor="let item of list | slice:0:10; let i=index" class="dropdown-item" (click)="onClick(item)">{{item.text}}</li>
あなたのアプローチに近い
<ng-container *ngFor="let item of list; i as index">
<li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-container>
代替
<ng-template ngFor let-item [ngForOf]="list" let-i="index">
<li class="dropdown-item" (click)="onClick(item)" *ngIf="i<11">{{item.text}}</li>
</ng-template>
関連
-
[解決済み] CLIを使ったAngular 2 - 制作のためのビルド
-
[解決済み] NGIf else "の使い方を教えてください。
-
[解決済み] Angularプロジェクトごとに生成される膨大な数のファイル
-
[解決済み】Angular 6でサービスを生成する際に、InjectableデコレータでprovidedInの目的は何ですか?
-
[解決済み] NgModule.schemasにCUSTOM_ELEMENTS_SCHEMAを追加してもエラーが表示される。
-
[解決済み] Angular HttpClient "パース中のHttp失敗"
-
[解決済み] prodのバンドルサイズを小さくするには?
-
[解決済み] AngularでngFor repeatをある数のアイテムに制限するにはどうすればよいですか?
-
[解決済み] angular ngModuleのentryComponentsとは何ですか?
-
[解決済み] 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 実装 サイバーパンク風ボタン
おすすめ
-
Node Sass は現在の環境のためのバインディングを見つけることができませんでした。Windows 64ビット、Node.js 8.x。
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] コンポーネントテンプレートで要素を選択するには?
-
[解決済み] ngIf」は「div」の既知のプロパティではないため、バインドできない [重複] 。
-
[解決済み] Angular 5 - クリップボードにコピーする
-
[解決済み] Angular 4 HttpClient クエリパラメータ
-
[解決済み] The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 found insteadでエラーが発生しました。
-
[解決済み] Angular 2 http.post()がリクエストを送信しない
-
[解決済み] Angular 2+ - ベースのhrefを動的に設定する
-
[解決済み] ファイル 'app/hero.ts' is not a module error in console, where to store interfaces files in directory structure with angular2?