Question

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

以下是代码：

app.component.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 我们可以使用Array的length属性，如下所示：

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 } })
}

Answer 2

你可以这样做：

  addWidget() {
this.widgets.push({ id: 3, title: 'Widget 3', config: { row: 1, col: this.widget.length, sizex: 1 }})
  }

Angular 5 - 将新元素推入数组

2 个答案: