web-dev-qa-db-ja.com

ngFor内で要素IDを動的に割り当てる

Angular 2が初めてで、* ngFor内のdivに動的に割り当てられたIDを与えようとしています。divはwave1、wave2、wave3と呼ばれます。 'など.

<li *ngFor="let episode of episodes; let i = index">
    <div id="wave{{i}}"></div>
</li>

ただし、これにより次のエラーがスローされます。

ERROR DOMException: Failed to execute 'querySelector' on 'Document':
     '#wave[object Object]' is not a valid selector.

私はまだstackoverflowでAngular 2のこの答えを見つけることができませんでした。これが重複している場合はおApび申し上げます

angularngfor
10
Tom O'Brien

{{ 'wave' + i }}の代わりにwave{{i}}を使用できます。 Angular Experession。これは完全なngForです：

<li *ngFor="let episode of episodes; let i = index">
     <div id="{{ 'wave' + i }}"></div>
</li>

動作し、正しいdivでidを作成します

document.getElementById("wave1")

出力は次のようになります。

<div id=​"wave1">​wave1​</div>

ただし、wave0は0から始まるので、コードはi = indexから始まることに注意してください。

11
Hend Khalifa

あなたが持っているものは正しいですし、angular 4/5で動作するはずです。あなたは多分本当に古い、プレリリースのangular 2バージョンを使用していますか？

ここにあなたのコードと以下のコードの両方のstackblitzがあります

https://stackblitz.com/edit/angular-khur4v?file=app%2Fapp.component.html

また、そのようにすることもできますが、これが好ましい方法です

<li *ngFor="let episode of episodes; let i = index">
    <div [attr.id]="'wave' + i">{{episode.name}}</div>
</li>
5
David

iを定義する必要はありません

<li *ngFor="let episode of episodes">
    <div id="wave{{episode}}">{{episode}}</div>
</li>

編集：エピソードがオブジェクトのリストの場合

<li *ngFor="let episode of episodes">
    <div id="wave{{episodes.indexOf(episode)}}">{{episode.name}}</div>
</li>
2
bugs

私にとっては、シングルクォートを追加すれば機能します。それ以外の場合Angularは変数を検出します。

<li *ngFor="let episode of episodes; let i = index">
    <div id="'wave' + i"></div>
</li>
2
Alex Seitz