4
私が取り組んでいるAngular 2アプリは、コールセンター向けです。html5データ属性のAngular 2 Template Parse Error
私は、ブートストラップモーダルである角2コンポーネントを作成しました。これは、ページ上で1つまたは複数のインスタンスを生成し、トリガーを作成して開くときに完全に機能します。そこには問題はありません。私はその部分を徹底的にテストしました。
私のアプリでは、クリックしたときにモーダルがポップアップされ、コール理由を選択したときにコールセンターの担当者に指示するチェックボックスのリストがあります。
これらのモーダルおよびトリガーを作成するには、これは私が置かれているコードです：
<div class="checkbox" *ngFor="#case of caseTypes; #i = index" data-toggle="modal" data-target="modal-i">
<label>
<input type="checkbox" [(ngModel)]="case.selected"> {{case.title}}
</label>
<instructions-modal [instruction]="case.instructions" title="{{case.title}}" closeButtonTitle="Finished" modalId="modal-{{i}}"></instructions-modal>
</div>
それが動作するはずのようにこれは思えるが、私はに行くとき、私は私のブラウザのコンソールで次のエラーを取得しますページ：
EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'data-toggle' since it isn't a known native property ("ss="col-md-6">
<h4>Case Type</h4>
<div class="checkbox" *ngFor="#case of caseTypes; #i = index" [ERROR ->][data-toggle]="modal" [data-target]="modal-i">
<label>
<input type="checkbox" [(ngModel)]="cas"): [email protected]:64
Can't bind to 'data-target' since it isn't a known native property ("ase Type</h4>
<div class="checkbox" *ngFor="#case of caseTypes; #i = index" [data-toggle]="modal" [ERROR ->][data-target]="modal-i">
<label>
<input type="checkbox" [(ngModel)]="case.selected"> {{case.ti"): [email protected]:86
私はthis questionを確認しましたが、それは私を助けませんでした。私は[]と一緒に試してみましたが、data-toggleとdata-targetのどちらもありませんでした。私はまた、ラベルだけでなく、チェックボックスをラップするdivで試してみました。そして、私は両方のスポットで同じエラーが発生します。
*ngForにHTML要素のカスタム属性または非ネイティブ属性を使用する方法はありますか？
エラーが発生するのは面白いことです。角度は実際にはデータトグルにバインドしようとしますが、これを行うべきではありません。どの角度の角度を使用しますか？サンプルコードは正しいですか？ – kemsky