Javascript 如何修复附加数据的角网格

代码如下：

app.component.html

子组件 line.component.ts

然后添加一个“区域2”，数据应该是这样的

 dashboard = [{
    area: "Area1"
    cols: 1
    rows: 1
    x: 0
    y: 0
    },{
    area: "Area2"
    cols: 1
    rows: 1
    x: 0
    y: 0
    }]

然后单击“取消”按钮并单击“编辑”按钮时，应如下所示：

dashboard = [{
        area: "Area1"
        cols: 1
        rows: 1
        x: 0
        y: 0
        }]

---

您的

line.component.ts

包含以下行

  ngOnChanges() {
    if (this.editing) {
      this.addItem(this.newAreaName);
    }
  }
  addItem(areaName: string): void {
    this.dashboard.push({ x: 0, y: 0, cols: 1, rows: 1, area: areaName });
    this.layout.emit(this.dashboard);
  }

每次下列输入之一

  @Input() newAreaName: string;
  @Input() editing: any;

编辑时的更改为true时，将推送一个新项目

您所做的并不是一个好的实践，基本上，您是从组件创建元素，使用文本输入更改事件作为触发器。 您可能希望更改逻辑并在应用程序行组件内添加按钮（或该组件外的addItem）

我能想到的一个快速但有点丑陋的解决方案是使用布尔值作为触发器=>

---

您可以更新您的ngOnChanges。这里有一个有效的解决方案，可以满足您的要求

我设置了一个默认记录（区域：“Area1”）

如果添加新记录（区域：“Area2”），则会将其添加到数组中

如果单击“取消”，它将删除最后一个元素

如果单击“编辑”，则可以看到默认元素

ngOnChanges() {
  if ((this.editing && !this.wasItemRemoved) || 
   this.isAddButtonPressed) {
   this.addItem(this.newAreaName);
   this.wasItemRemoved = false;
 }else {
   if (this.dashboard.length > this.elementsSize) {
   this.dashboard.pop();
   this.wasItemRemoved = true;
 }
 this.layout.emit(this.dashboard)
 }
}

---

我添加了这个

if（this.newAreaName&&this.editing）{this.addItem（this.newAreaName）；}

但它仍然是一样的。当我试图取消并编辑2-3倍或更多的附加/添加数据时。@ABC我做了一个快速（但不是很干净）的解决方案。我测试了它，但在添加新项目时它会继续附加。假设有一个项目是AREA1，那么当它添加一个新项目时，即它将从数组中添加的AREA2，然后当它单击cancel按钮时，数组应该为空，当它单击edit按钮时，数组只有一个项目，即AREA1，即现有数据。我添加了changes.requestAdd.currentvalue，但其未定义，添加

？。

错误缺少空格如果使用旧的typescript版本，请不要使用

？。

如果（changes.requestAdd&&changes.requestAdd.currentValue）则使用

。

仅适用于最新的typescript版本请检查-。如果我有2个或多个现有数据，我会尝试，当我单击“取消”时，它也会删除？@ABC我更新了我的答案，当仅单击“取消”时，它将始终删除：）。更新如下：

dashboard = [{
        area: "Area1"
        cols: 1
        rows: 1
        x: 0
        y: 0
        }]

  ngOnChanges() {
    if (this.editing) {
      this.addItem(this.newAreaName);
    }
  }
  addItem(areaName: string): void {
    this.dashboard.push({ x: 0, y: 0, cols: 1, rows: 1, area: areaName });
    this.layout.emit(this.dashboard);
  }

  @Input() newAreaName: string;
  @Input() editing: any;

ngOnChanges() {
  if ((this.editing && !this.wasItemRemoved) || 
   this.isAddButtonPressed) {
   this.addItem(this.newAreaName);
   this.wasItemRemoved = false;
 }else {
   if (this.dashboard.length > this.elementsSize) {
   this.dashboard.pop();
   this.wasItemRemoved = true;
 }
 this.layout.emit(this.dashboard)
 }
}