问阵列更改时的更新

EN

import { AoBarService } from './ao-bar.service';
import { DrawAreaComponent } from '../../../draw-area/draw-area/draw-area.component';

@Component({
  selector: 'app-ao-bar',
  templateUrl: './ao-bar.component.html',
  styleUrls: ['./ao-bar.component.sass']
})
export class AoBarComponent implements OnInit {

  objectsList: object[] = new Array();

  showObjectsList: boolean;

  drawAreaComponent: DrawAreaComponent = new DrawAreaComponent();

  constructor(private service: AoBarService) { 
    this.service.getObject(this.objectsList);
  }

  ngOnInit() {
    console.log(this.objectsList, ' AoBarComponent');
  }

  private onShowObjectsList() {
    this.showObjectsList = !this.showObjectsList;
  }

  public onDragEnd(event: DragEvent): void {
    console.log('drag end', event);   

    if (this.drawAreaComponent.onDragEnter) {

      for (let object of this.objectsList) {

        if (object.name == event.path[0].nextElementSibling.innerText) {

          object.settings.x = event.x;
          object.settings.y = event.y;

          this.drawAreaComponent.createObject(object);
        }
      }  
    }
  }


}

import { Component, OnInit } from '@angular/core';
import { CdkDragEnd } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-draw-area',
  templateUrl: './draw-area.component.html',
  styleUrls: ['./draw-area.component.sass']
})
export class DrawAreaComponent implements OnInit {

  objectsList: object[] = new Array();

  constructor() {

  }

  ngOnInit() {

  }

  public onDragEnter(event: DragEvent): boolean {
    console.log('drag enter', event);

    return true;
  }

  public onDragEnd(event: CdkDragEnd): void {
    console.log(event);
  }

  public createObject(objectToCreate: object): void {
    this.objectsList.push(objectToCreate);

    console.log(`Aktuelle Liste: ${this.objectsList}`);
  }
}

<div id="DrawAreaComponent">
  <div 
    class="example-boundary"
    (dragenter)="onDragEnter($event)"  
  >

    <div 
      id="ContainerObject" 
      *ngFor="let object of objectsList | async"
      cdkDragBoundary=".example-boundary"
      cdkDrag
      (cdkDragEnded)="onDragEnd($event)"
    >
      <img id="ImgObject" [src]="object.imgUrl">
    </div> 
  </div>
</div>