cloth-design/cloth-design/src/app/modules/cloth/mobile/device-management/device-management.html

<!-- device-management.component.html -->
<div class="container">
  <h2>设备管理</h2>

  <div class="new-device">
    <input type="text" [(ngModel)]="newDeviceName" placeholder="设备名称" />
    <button (click)="addDevice()">添加设备</button>
  </div>

@if (devices.length > 0) {
  <div class="devices-list">
    @for (device of devices; track device.id) {
      <div class="device" (click)="selectDevice(device)">
        <span>{{ device.get('name') }}</span>
        <button (click)="deleteDevice(device)">删除</button>
      </div>
    }
  </div>
} @else {
  <!-- 添加设备列表为空时的内容 -->
  <div class="no-devices-message">
    <p>⚠️ 没有可用设备</p>
  </div>
}

  <ng-template #noDevices>
    <p>没有设备。</p>
  </ng-template>

@if (selectedDevice) {
  <div class="selected-device">
    <h3>选中的设备</h3>
    <p>{{ selectedDevice.get('name') }}</p>
  </div>
} @else {
  <!-- 添加未选择设备时的内容 -->
  <div class="no-selected-device">
    <p>⚠️ 未选择设备</p>
  </div>
}

  <ng-template #noSelectedDevice>
    <p>没有选中的设备。</p>
  </ng-template>
</div>