在角度 6 中动态添加 div 容器答案

【问题标题】：dynamically add div container in angular 6在角度 6 中动态添加 div 容器
【发布时间】：2018-11-28 04:47:24
【问题描述】：

如何在angular中动态添加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>

我是角度方面的新手。请任何人帮助我做到这一点。

【问题讨论】：

那么，当用户点击Add按钮时，您想要多个contentInside divs？
是的。如果我点击一次它应该添加一个容器，像这样我会点击多少次，那么多少容器应该水平添加

标签： html css angular angular6

【解决方案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);
  }
}

【讨论】：

【解决方案2】：

尝试将此示例与更新的 css 一起用于自动滚动：

https://stackblitz.com/edit/angular-pujraw?file=src%2Fapp%2Fapp.component.css

【讨论】：