私はpersonInvolvedコンポーネントを持っています。このコンポーネントにはpersonDetailsコンポーネントがあります。 personInvolvedコンポーネントにボタンがあります。私はDOM上にpersonDetailsを追加する必要があるボタンのOnclick。クリックするたびにpersonDetailsコンポーネントが追加されます。どうすればこれを実現できますか?angular2のボタンをクリックするとdomにコンポーネントが追加されます
4
A
答えて
11
使用ngFor:
<button (click)="addPerson()">Add person</button>
<person-details *ngFor="let person of persons" [person]="person"></person-details>
とコンポーネントのコードで:
persons: Array<Person> = [];
addPerson() {
this.persons.push(new Person());
}
+0
ここでpersonDetailsはtemplateURLを持つ他のコンポーネントです。私はpersonInvolvedコンポーネントのaddpersonボタンをクリックしてpersonDetailsを追加する必要があります。初めて
+0
ここで新しいPerson()メソッドとは何ですか? –
+0
Working ..ありがとう –
関連する問題
- 1. 角をクリックしてボタンをクリックするとコンポーネントが追加されますか?
- 2. Angular2コンポーネントをDOMに動的に追加する
- 3. Angular2:クリア値は、値がangular2のボタンをクリックした後に追加されると、テキストをクリアする方法
- 4. ボタンをクリックすると入力フィールドが追加されます
- 5. Angular2 - DOMにdivを追加する
- 6. 動的に追加されたAngular2コンポーネントはレンダリングされませんが、静的に追加されます
- 7. ボタンをクリックすると、プログラムにフラグメントがアクティビティに追加されます
- 8. React Nativeのボタンを押すと、TextInputコンポーネントが次々に追加されます
- 9. ボタンをクリックするとGoogleマップにマーカーが追加されます
- 10. ボタンをクリックすると、テキストが編集テキストウィンドウに追加されます
- 11. Cant DOMにhtmlボタンが追加されました
- 12. angular2:* ngIfでアイコンを構築するとDOMに何も追加されない
- 13. Angular2:左のナビゲーションをクリックすると表示されるコンポーネント
- 14. ボタンに画像を追加してボタンがクリックされない
- 15. アンドロイドでボタンをクリックするとズーム機能が追加されますか?
- 16. WPF Datagrid双方向バインディング:ボタンをクリックすると行が追加されます
- 17. ASP google mapボタンをクリックするとマーカーが追加されます
- 18. ボタンをクリックすると新しいdivが追加されます
- 19. Googleマップにボタンを追加するAngular2
- 20. ボタンがクリックされたときにテーブルにテキストボックスを追加する方法
- 21. LaravelがリンクをクリックするとURLに追加されます
- 22. Angular2コンポーネントのHTMLマークアップにクラスを追加するAngular2でスタイル
- 23. Vue.jsボタンをクリックすると動的にHTMLが追加される
- 24. Reactjs:ボタンをクリックしてコンポーネントを追加する
- 25. Angular2のボタンをクリックすると警告ダイアログボックスが表示されます
- 26. ボタンをクリックすると、angular2の同じデータが表示されます
- 27. GridViewは私の追加ボタンをクリックするとシャキングされます
- 28. JPanelをボタンのクリックに追加する
- 29. ボタンをクリックしたときに追加ボタンが呼び出されない
- 30. Reactに同じコンポーネントを追加するボタンがあります
あなたは、コンポーネントを削除して、再度たびに、それを作成しますか?または、クリックごとにインスタンスを追加し続けたいですか? –
毎回、そのコンポーネントテンプレートのURLを追加します。 –
次に、@ JB Nizetによる以下の回答が必要です。 –