如何修复 angular gridster 附加数据

Question

代码如下：

app.component.html

<input type="text" [(ngModel)]="newAreaName"/><button (click)="addItem()" [disabled]="editing ? false : true">ADD</button>
<button (click)="toggleEditing()">{{ editing ? 'Cancel' : 'Edit'}}</button>
<app-line (layout)="setFloorLayout($event)" [editing]="editing" [newAreaName]="newArea"></app-line>

app.component.ts

flrLayout = [];
  editing = true;

  newAreaName = "";
  newArea = "";

  setFloorLayout(data: any) {
    this.flrLayout = data;
  }

  addItem(): void {
this.newArea = this.newAreaName;
this.newAreaName = "";
console.log(`SUCCESS ADDING`);
  }
  toggleEditing() {
    this.editing = !this.editing;
  }

子组件 line.component.ts

@Input() newAreaName: string;
  @Output() layout: EventEmitter<any> = new EventEmitter();
  @Input() editing: any;

  options: Safe;

  dashboard = [];

  ngOnInit() {}

  ngOnChanges() {
    console.log(this.dashboard);
    if (this.newAreaName && 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);
  }

这里的问题是在添加新数据后，当我单击取消然后尝试单击编辑按钮时，它会自动附加新数据。相反，仪表板数组将为空。

这是代码和输出：https://stackblitz.com/edit/angular-rc7bbz?file=src%2Fapp%2Fapp.component.ts

注意：添加数据后，点击取消，然后点击编辑按钮。

假设有一个现有数据

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

然后添加一个“Area2”数据应该是这样的。

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

Answer 1

您的 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;

changes while editing 为 true，将推送一个新项目。

这不是一个好的做法，基本上，您是从组件创建元素，使用文本输入更改事件作为触发器。您可能想更改逻辑并在 app-line 组件内添加按钮（或该组件外的 addItem）

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

https://stackblitz.com/edit/angular-9geygo?file=src/app/line/line.component.ts

Answer 2

您可以更新您的 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)
 }
}

LIVE DEMO

如何修复 angular gridster 附加数据

How to fix the angular gridster appending data

javascript

typescript

angular

angular-gridster2