web-dev-qa-db-ja.com

angular 6にdivコンテナを動的に追加します

角にdivコンテナーを動的に追加する方法？

私のHTMLコードを見てください。 「追加」ボタンをクリックするたびに、1つの新しい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>

私は角度が新しい。誰かがこれを行うのを手伝ってください。

htmlcssangularangular6
7
sathish kumar

これを行う最も簡単な方法は、配列を使用することです。その方法をお見せしましょう。

これが 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);
  }
}
10
Bunyamin Coskuner

自動スクロール用に更新されたcssでこの例を使用してみてください：

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

1
Dinesh Ghule