[解決済み] ngForで数値を元にHTML要素を複数回繰り返す
2022-05-09 03:32:39
質問
を使用するにはどうすればよいのでしょうか?
*ngFor
を使用して、HTML 要素を複数回繰り返すことができますか?
例えば、以下のような場合です。 メンバー変数に20を代入している場合。divを20回繰り返すには、*ngForディレクティブをどのように使用すればよいのでしょうか?
どのように解決するのですか?
以下を利用するとよいでしょう。
@Component({
(...)
template: `
<div *ngFor="let i of Arr(num).fill(1)"></div>
`
})
export class SomeComponent {
Arr = Array; //Array type captured in a variable
num:number = 20;
}
またはカスタムパイプを実装する。
import {PipeTransform, Pipe} from '@angular/core';
@Pipe({
name: 'fill'
})
export class FillPipe implements PipeTransform {
transform(value) {
return (new Array(value)).fill(1);
}
}
@Component({
(...)
template: `
<div *ngFor="let i of num | fill"></div>
`,
pipes: [ FillPipe ]
})
export class SomeComponent {
arr:Array;
num:number = 20;
}
関連
-
[解決済み] Angular HTMLバインディング
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] Angular CLI SASSオプション
-
[解決済み] 例外が発生しました。既知のネイティブプロパティではないため、'ngFor'にバインドできない
-
[解決済み】*ngIfと*ngForが同じ要素にあるとエラーになる件
-
[解決済み] Angular - "has no exported member 'Observable'" エクスポートされたメンバーがありません。
-
[解決済み] angular ngModuleのentryComponentsとは何ですか?
-
[解決済み] ページを離れる前に、未保存の変更点を警告する
-
[解決済み] Angularでフォームの変更を監視する方法
-
[解決済み] Angular 2のテンプレートでlet-*とは何ですか?
最新
-
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インタビュー質問まとめ1~基礎知識(Angular v8+)編
-
Angularが報告するインジェクションエラーとその解決方法...$injector:unpr]。
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み】Angular 2 - NgForは、コレクションの代わりに数字を使用します。
-
[解決済み】take(1) vs first()
-
[解決済み] AngularのHttpClientでエラーをキャッチする
-
[解決済み] エラーが発生しました。出力が初期化されていません
-
[解決済み] Angular 2でシングルトンサービスを作成するには?
-
[解決済み] VSCodeでAngularをデバッグする方法とは?
-
[解決済み] angular-cli server - デフォルトのポートを指定する方法