如何实现单个离子卡的切换效果？

Posted 2023-02-18

【中文标题】如何实现单个离子卡的切换效果？

【英文标题】：How to achieve a toggle effect to individual ion-card?

【发布时间】：2021-12-29 11:38:23

【问题描述】：

当前问题：每当我更改切换时，更改效果都会应用于每张离子卡。 预期：我想在离子卡上单独实现切换效果。

html：

 <ion-grid>
        <ion-row>
          <ion-col *ngFor="let device of individual_room.devices">
            <ion-card>
                <ion-col><img src="assets/icon/favicon.png"/></ion-col>
                <ion-card-content>
                <ion-card-title>
                     device.name  <ion-badge item-end> device.company  </ion-badge>
                </ion-card-title>
                <ion-toggle [(ngModel)]="deviceStatus" (ionChange)="deviceStatusChange()"></ion-toggle>
                </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
    </ion-grid>

CSS：

ion-card 
    --background:#262626;
    height: 150px;
    width: 80% !important;


ion-toggle[aria-checked="false"]
    position: relative;
    width: 60px;
   &::before 
     position: absolute;
     content: "";
     font-size: 10px;
     line-height: 10px;
   
   &::after 
     position: absolute;
     content: "";
   
  
  ion-toggle[aria-checked="true"]
   position: relative;
   width: 60px;
   &::before 
     position: absolute;
     content: "";
   
  &::after 
    position: absolute;
    content: "";
    font-size: 10px;
    line-height: 10px;
    top: 0;
    left: 3px;
    color: #fff;
  
 

TS 文件：

const TOKEN_KEY = 'CapacitorStorage.user-token'
@Component(
    selector: 'app-tabhome',
    templateUrl: './tabhome.page.html',
    styleUrls: ['./tabhome.page.scss'],
)
export class TabhomePage implements OnInit, AfterViewInit 
    
    public deviceStatus:boolean = true;
    ngOnInit() 

        // locally provided json file
          fetch('./assets/data/tabHomeData.json').then(res => res.json())
          .then(res => 
           this.data = res
          );

        const headerHeight = isPlatform('ios') ? 44 : 56
        this.document.documentElement.style.setProperty(
            '--header-position',
            `calc(env(safe-area-inset-top) + $headerHeightpx)`
        )
    

    deviceStatusChange()
        console.log("device toggle switch : "+this.deviceStatus);
    

    ngAfterViewInit() 
        this.lists.changes.subscribe((_) => 
            this.listElements = this.lists.toArray()
        )
    

    

tabHomeData.json ：

    "user": "Ram",
    "rooms": [
        
            "name": "LIVING ROOM",
            "devices": [
                
                    "name": "fan",
                    "type": "FAN",
                    "company": "Philips",
                    "state": "ON",
                    "speed": 100
                ,
                
                    "name": "bulb",
                    "type": "BULB",
                    "company": "Philips",
                    "state": "ON",
                    "colour": "WHITE"
                ,
        
                    "name": "Hall TV",
                    "type": "TV",
                    "company": "Redmi",
                    "state": "OFF"
                ,
        
                    "name": "AC",
                    "type": "AC",
                    "company": "Philips",
                    "state": "ON",
                    "colour": "WHITE"
                ,
        
                    "name": "bulb",
                    "type": "BULB",
                    "company": "Philips",
                    "state": "ON",
                    "colour": "WHITE"
                ,
        
                    "name": "bulb",
                    "type": "BULB",
                    "company": "Philips",
                    "state": "ON",
                    "colour": "WHITE"
                
            ]
        ,
        
            "name": "Kitchen",
            "devices": [
                
                    "name": "fan",
                    "type": "FAN",
                    "company": "Philips",
                    "state": "OFF",
                    "speed": 50
                ,
                
                    "name": "bulb",
                    "type": "BULB",
                    "company": "Philips",
                    "state": "OFF",
                    "colour": "YELLOW"
                
            ]
        ,
        
            "name": "BED ROOM",
            "devices": [
                
                    "name": "fan",
                    "type": "FAN",
                    "company": "Philips",
                    "state": "OFF",
                    "speed": 50
                
            ]
        ,
        
            "name": "WASH ROOM",
            "devices": [
                
                    "name": "exast",
                    "type": "FAN",
                    "company": "Philips",
                    "state": "OFF"
                ,
                
                    "name": "bulb",
                    "type": "BULB",
                    "company": "Philips",
                    "state": "OFF",
                    "colour": "YELLOW"
                ,
                
                    "name": "bulb",
                    "type": "BULB",
                    "company": "Philips",
                    "state": "ON",
                    "colour": "WHITE"
                
            ]
        
    ]

在循环中通过 json 文件的 HTML 文件中，我试图在 cardView 中设置每个设备。并且想分别为每张卡使用切换。

请在下面找到截图：

【参考方案1】：

离子卡上的切换有很多不同的方法，下面是实现它的一种方法：

使用 json 上的 state 属性来管理卡片上切换组件的切换状态

像这样修改你的切换组件：

将切换状态更改添加到 deviceStatusChangeMethod

公共设备状态更改（设备：任何） device.state = (device.state === 'ON') ？ “关”：“开”；

【讨论】：

你好李，执行这些步骤后，第一次切换不起作用。假设最初切换处于 ON 模式。在 UI 中单击切换后，在日志中我可以看到它正在打印，但在 UI 上它仍处于 ON 模式。 UI 切换第二次进入关闭模式，但日志设备状态中的时间为开启。你能帮我解决这个问题吗？

@PriteshBhate 你想在这里添加你的代码吗？如果是这样，我可以偷看一下，看看是否有什么突出的地方。 stackblitz.com/edit/ionic-js46vd?file=pages%2Fhome%2Fhome.ts