本來以為自己會順順的接上API，但是因為不是一氣呵成的寫，前後端模型有幾個欄位沒對應到，害我卡了一下，但還好追蹤問題跟調整問題還算快。

以下是動態生成的家具資料

import { Component, ElementRef, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { NzModalService } from 'ng-zorro-antd/modal';
import { CRUD, EditType } from 'src/app/feature/enum/furniture.enum';
import { Furniture } from 'src/app/feature/interface/furniture.interface';
import { FurnitureModalComponent } from 'src/app/feature/modal/furniture-modal/furniture-modal.component';
import { StorageModalComponent } from 'src/app/feature/modal/storage-modal/storage-modal.component';
import { StorageService } from './service/storage.service';

@Component({
  selector: 'app-day18',
  templateUrl: './day18.component.html',
  styleUrls: ['./day18.component.scss']
})
export class Day18Component implements OnInit {

  @ViewChild('floorPlan') floorPlanRef!: ElementRef<SVGSVGElement>;
  @ViewChild('popover') popover!: ElementRef;
  editType: EditType = EditType.furniture;
  EditType = EditType;
  isPopoverVisible = false;
  isStorage = false;
  furnitureSetting!: Furniture;
  popoverX = 0;
  popoverY = 0;

  furnitureList: Furniture[] = [ ];

  constructor(
    private modal: NzModalService,
    private viewContainerRef: ViewContainerRef,
    private storageService: StorageService,
  ) {
  }

  private sortFurnitureByIndex() {
    this.furnitureList.sort((a, b) => a.zIndex - b.zIndex);
  }

  ngOnInit(): void {
    this.storageService.getFurnitureList('66fe483f2e043d4fa5a2de9c')
      .subscribe(res => {
        if (res) {
          this.furnitureList = res;
          console.log('furnitureList', this.furnitureList);
          this.sortFurnitureByIndex();
        }
      });
  }

  onDoubleClick(item: Furniture, event: MouseEvent): void {
    this.isPopoverVisible = true;
    this.isStorage = item.isStorage;
    this.popoverX = event.clientX;
    this.popoverY = event.clientY;
    this.furnitureSetting = item;
  }

  onPopoverClose() {
    this.isPopoverVisible = false;
  }

  onPopoverButtonClick(editType: EditType,) {
    switch (editType) {
      case EditType.furniture:
        this.isPopoverVisible = false;
        this.furnitureModal(this.furnitureSetting);

        break;
      case EditType.storage:
        this.isPopoverVisible = false;
        this.storageModal(this.furnitureSetting)
        break;

      default:
        break;
    }
  }

  updateFurniturePosition($event: Furniture) {

  }
  updateFurnitureRotation($event: Furniture) {

  }
  updateFurnitureSize($event: Furniture) {

  }
  private furnitureModal(item: Furniture): void {
    console.log('furnitureModal', item);
    const modal = this.modal.create({
      // nzTitle: tplTitle,
      nzContent: FurnitureModalComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzFooter: null,
      nzMaskClosable: false,
      nzClosable: false,
      nzData: {
        furniture: item,
        action: CRUD.update
      },
      nzOnOk: () => console.log('Click ok')
    });
  }

  private storageModal(item: Furniture): void {
    console.log('storageModal', item);
    this.modal.create({
      // nzTitle: tplTitle,
      nzContent: StorageModalComponent,
      nzFooter: null,
      nzWidth: '95vw',
      // nzMaskClosable: false,
      // nzClosable: false,
      // nzComponentParams: {
      //   // value: 'Template Context'
      // },
      nzOnOk: () => console.log('Click ok')
    });
  }
}