[解決済み】Angular 2 - NgForは、コレクションの代わりに数字を使用します。
2022-04-02 10:16:59
質問
...例えば...
<div class="month" *ngFor="#item of myCollection; #i = index">
...
</div>
というようなことは可能でしょうか...
<div class="month" *ngFor="#item of 10; #i = index">
...
</div>
...のような非エレガントな解決策に訴えることなく。
<div class="month" *ngFor="#item of ['dummy','dummy','dummy','dummy','dummy',
'dummy','dummy','dummy']; #i = index">
...
</div>
?
解決方法は?
コンポーネント内で、以下のような数値の配列(ES6)を定義することができます。
export class SampleComponent {
constructor() {
this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4]
this.numbers = Array(5).fill(4); // [4,4,4,4,4]
}
}
配列の作成については、こちらのリンクを参照してください。 JavaScript で 1 から 20 までの整数の配列を作成する最も簡単な方法 .
そして、この配列に対して
ngFor
:
@Component({
template: `
<ul>
<li *ngFor="let number of numbers">{{number}}</li>
</ul>
`
})
export class SampleComponent {
(...)
}
あるいは、まもなく。
@Component({
template: `
<ul>
<li *ngFor="let number of [0,1,2,3,4]">{{number}}</li>
</ul>
`
})
export class SampleComponent {
(...)
}
関連
-
[解決済み] Angular EXCEPTION: Http用のプロバイダがありません。
-
[解決済み] Angular "未定義のプロパティ 'subscribe' を読み取ることができません".
-
[解決済み] Angular 2の「コンポーネント」は既知の要素ではありません。
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] インデックスを属性値とするngFor
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み】*ngIfと*ngForが同じ要素にあるとエラーになる件
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular2 CLI エラー "@angular/compiler-cli" パッケージが正しくインストールされていません。
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
[解決済み] Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'.
-
[解決済み] Typescript - コードが TS1128: Declaration or Statement expected というエラーでビルドに失敗するが、コードを提供すると期待通りに実行される。
-
[解決済み] "エラーです。オーバーレイのプロバイダがありません!"
-
[解決済み] なぜ mat-tables matRowDef は 2 つの変数を含むのですか?
-
[解決済み] ローカルホストが私のアンギュラーアプリに対して無効な応答を送信しました。
-
[解決済み] 1...N を含む配列の作成方法
-
[解決済み] JavaScriptには、与えられた範囲内の範囲を生成する "range() "のようなメソッドがありますか?
-
[解決済み] ngForで数値を元にHTML要素を複数回繰り返す