如何修复角光栅附加数据

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>

应用程序组件.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;
}

子组件行组件.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
}]

然后添加一个"；区域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
}]

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;

当编辑为true时，将推送一个新项目。

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

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

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

Answer 2

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

1. 我设置了一个默认记录(区域："Area1"(

2. 如果您添加一个新记录(区域："Area2"(，它会将其添加到阵列中

3. 如果你点击取消，它会删除最后一个元素

4. 如果你点击编辑，你可以看到你的默认元素

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

现场演示