javascript - Angular 5 - 将新元素插入数组

Question

我有一个按钮单击功能，我希望它向当前小部件数据添加一个新行，以便它将新添加到当前小部件数据中。

这是代码:

应用程序组件.html

 <a (click)="addWidget()" class="btn btn-primary pull-right navbar-btn">Add Widget</a>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  public widgets: any;

  constructor() {
    let count = 1;
    this.widgets = [
      { id: 1, title: 'Widget 1', config: { row: 1, col: 1, sizex: 1 }},
      { id: 2, title: 'Widget 2', config: { row: 1, col: 2, sizex: 1 } },
  ];
    this.widgets.map(() => {
      count++;
    });
  }

  addWidget() {
    console.log('This will add a new widget');
  }  

}

我怎样才能做到这一点？

Answer 1

您正在使用数组 widgets并且可以使用
push
在数组末尾添加元素的方法。保持动态id和 name我们可以使用 length Array 的属性如下所示:

addWidget() {
    const title: string = 'Widget ' + this.widgets.length;
    this.widgets.push({ id: this.widgets.length + 1, title: title, config: { row: 1, col: 3, sizex: 1 } })
}