Javascript Angular 5 - onclick 事件将组件附加到 div 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47512731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 - onclick event append component into div
提问by
I am using Angular 5 and I have this:
我正在使用 Angular 5，我有这个：
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
appendToContainer() {
// Do the stuff here
// Append PanelComponent into div#container
}
}
Now the app.component.html
现在 app.component.html
// app.component.html
<button (click)="appendToContainer()"></button>
<div id="container"></div>
and finally I have a simple component
最后我有一个简单的组件
// panel.component.html
<div class="panelComponent">
This is a panel Component html
</div>
What I want to do is that everytime the button on app.component.html is click I need a panel.component appended into app.component.html
我想要做的是，每次点击 app.component.html 上的按钮时，我都需要将 panel.component 附加到 app.component.html
How can I do this?
我怎样才能做到这一点？
采纳答案by Eliseo
You can use a *ngFor and a variable to achieve you want
您可以使用 *ngFor 和变量来实现您想要的
//In your component
num:number=0
//You html like
<button (click)="num++"></button>
//we create a array "on fly" and slice to get only a "num" items
<div *ngFor="let item in [0,1,2,3,4,5,6,7,8,9].slice(0,num)" class="panelComponent">
This is a panel Component html
</div>
