トグルボタンのコンポーネントを作成しています。スタイリングは入力ラベルに依存するので、idとforを使用する必要があります。角入力コンポーネントの重複ID
ページにこれらのコンポーネントが複数ある場合は、明らかに混乱します...これに対処する最もよい方法は何ですか？ランダムは関数によってidを生成しますか？
<div class="toggle-group checkbox-group-inline btn btn-link">
<input class="tgl tgl-light" id="toggle" type="checkbox" [checked]="value" (change)="stateChange($event.target.checked)">
<label class="tgl-btn" for="toggle"></label>
</div>
利用率のため：
<div *ngFor="let item of items; let i = index" class="toggle-group checkbox-group-inline btn btn-link">
<input class="tgl tgl-light" id="toggle_{{i}}" type="checkbox" [checked]="value" (change)="stateChange($event.target.checked)">
<label class="tgl-btn" for="toggle_{{i}}"></label>
</div>
forループはどこにありますか？ –
私は彼がチェックボックスをハードコードしていないと思います。もしそうでなければ、彼はIDのこの問題を持っていないでしょうから、IDのハードコードもできるからです。 –
しかし、一部の人々はその知識を持っていません。 –
input秒でlabel秒を関連付けるための正しい方法はid Sを介して行われ、これは、動的なidのための有効なユースケースのように見えます。
これを行うには、randNumプロパティをインスタンス化時に作成された乱数を含むクラスに追加します。
乱数（クラスプロパティ）
randNum = Math.floor(Math.random() * 1000000000);
テンプレート今
<div class="toggle-group checkbox-group-inline btn btn-link">
<input class="tgl tgl-light" [id]="'toggle' + randNum" type="checkbox" [checked]="value" (change)="stateChange($event.target.checked)">
<label class="tgl-btn" [for]="'toggle' + randNum"></label>
</div>
、場合：次に、あなたはそうのようなユニークな識別子を作成するために、テンプレート全体でこの乱数を使用することができますこのコンポーネントが同じページに10回ある場合、コンポーネントの10個のインスタンシエーションには一意の値がrandNumになり、目的の効果が得られます。
編集：
あなたはかなり離れてランダムな数字から滞在したい場合は、あなたがそうのようなrandNumの基礎として静的プロパティを定義することで、一意性を確保することができますで
static num = CustomComponent.num || 0;
randNum = ++CustomComponent.num;
上記のコードでは、各コンポーネントは、インスタンス化ごとにインクリメントされるため、一意のrandNumを持つことが保証されています。
個人的には、失敗した場合にチャンスが0.0000000000001％であっても、一意の値をランダムに使用するのは嫌です。問題は、これらのチェックボックスがハードコードされているか生成されているかどうかです。 –
@ThomasVanderVeen生成 – nick