|
@@ -7,27 +7,37 @@
|
|
|
<button (click)="addDevice()">添加设备</button>
|
|
|
</div>
|
|
|
|
|
|
- @if(devices.length > 0; else noDevices) {
|
|
|
- <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>
|
|
|
- }
|
|
|
+@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; else noSelectedDevice) {
|
|
|
- <div class="selected-device">
|
|
|
- <h3>选中的设备</h3>
|
|
|
- <p>{{ selectedDevice.get('name') }}</p>
|
|
|
- </div>
|
|
|
- }
|
|
|
+@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>
|