以角度6动态添加div容器

Question

如何以角度动态添加div容器？

请看我的HTML代码.每当我点击"添加"按钮时,一个新的div应该添加该按钮的左侧.动态地,它应该根据点击的方式添加多个容器.一切都应该横向加入.如果默认情况下它是更多的容器,它应该添加滚动并且它是统一的.任何人都可以帮我做到这一点angular 6.

#content{
    width:100%;
    height:90px;
    border:1px solid black;
}
#contentInside{
    width:100px;
    height:70px;
    margin:7px;
    border:1px solid black;
    display:inline-flex;
}

<div id="content">
    <div id="contentInside">
    
    </div>
    <button (click)="add()">Add</button> 

</div>

我是棱角分明的新人.请有人帮我这样做.

Answer 1

最简单的方法是使用数组.让我来告诉你怎么做.

这是stackblitz

我创建了一个空元素数组,并调用它containers.

每次用户点击Add按钮,我都会将另一个元素推送到此数组.我推的元素并不重要,所以我按下数组的当前长度,这样它最终会像[0, 1, 2, 3, 4...]

@Component({
  selector: 'my-comp',
  template: `
    <div id="content">
      <div id="contentInside" *ngFor="let container of containers"></div>
      <button (click)="add()">Add</button>
    </div>
  `,
  styles: [`
    #content{
      width:100%;
      height:90px;
      border:1px solid black;
    }
    #contentInside{
      width:100px;
      height:70px;
      margin:7px;
      border:1px solid black;
      display:inline-flex;
    }
  `]
})

export class MyComponent implements OnInit {

  containers = [];

  constructor() { }

  ngOnInit() { }

  add() {
    this.containers.push(this.containers.length);
  }
}