在角度6中动态添加div容器 [英] dynamically add div container in angular 6

查看:73
本文介绍了在角度6中动态添加div容器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何在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> 

我是新手.请任何人帮助我做到这一点.

解决方案

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

这是 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);
  }
}

How to dynamically add div containers in angular?.

Please look at my html code. Whenever I will click "Add" button, one new div should add left side of that button. Dynamically it should add multiple containers based on how any clicks. Everything should add in horizontal wise. If it is more containers by default it should add scroll and it be in uniform. Can anyone please help me to do this in 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>

I am new in angular. Please anyone help me to do this.

解决方案

Easiest way to do this is with an array. Let me show you how.

Here is the stackblitz

I create an array of empty elements, and call it containers.

Every time, user clicks on Add button, I push another element to this array. The element I push does not matter, so I push the current length of the array so it will end up like [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);
  }
}

这篇关于在角度6中动态添加div容器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆