动态读取离子切换值并发布到数据库

Posted 2023-03-13

【中文标题】动态读取离子切换值并发布到数据库

【英文标题】：Dynamically read ionic toggle value and post to database

【发布时间】：2019-03-14 23:23:49

【问题描述】：

我正在显示数据库中的名称列表，我需要在所有列表中都有一个切换按钮，分别对应 id 并将它们发布到数据库。 如何在 ionic 中添加切换按钮并使用 id 动态读取它的值。

stud.html

<ion-item *ngFor="let list of getStudentList"> <ion-label>list.Student_FirstName</ion-label> <ion-toggle [(ngModel)]="list.Student_FirstName" (ionChange)="changeToggle()"></ion-toggle> </ion-item>

stud.ts

`

   changeToggle() 
    console.log(this.Student_FirstName + "is checked");
  `

【参考方案1】：

您可以使用 $http 以 Angular 方式发送请求。 对于您的情况，您需要将方法指定为“POST”并将其发送到处理数据库的 Web 服务 API (url)。由于它是 POST 方法，请不要忘记添加“数据”，以防您的 Web 服务需要此请求中的变量。

在你的 changeToggle() 函数中，你还需要检查它是否被切换然后你对你的数据库做一些事情，但是如果它没有被切换那么你就做不同的事情或者什么也不做。这取决于您的要求。

更新

试试这个：

<ion-item *ngFor="let list of getStudentList">
                <ion-label>list.Student_FirstName</ion-label>
                <ion-toggle [(ngModel)]="list.Student_FirstName" (ionChange)="changeToggle(list)"></ion-toggle>
            </ion-item>

并在您的 changeToggle() 中输入 1 个输入，即 list。

changeToggle(list)
    console.log(list)

您应该看到 list 对象，其中包含其 ID。

希望这会有所帮助。

【讨论】：

我没有切换选择的 ID，我在阅读列表 ID 时感到震惊

@MadhankumarBK 我编辑了答案。请看看它是否对你有帮助。

谢谢，它可以工作，但是每当我在 list.Student_FirstName 的位置更改切换值时，它都会显示切换布尔值（选中时为 true，未选中时为 false）。

因为您使用 [(ngModel)]="list.Student_FirstName" 并且 ion-toggle 仅返回 true 或 false 的事实，所以您将看到您的变量 list.Student_FirstName 只会是 true 或 false .

您能否建议如何将这些动态列表默认设置为真（或打开）。并将这些值（名称和切换值）存储在一个数组中。

【参考方案2】：

您可以轻松地将当前项目传递给ionChange 函数

<ion-toggle 
  [(ngModel)]="list.Student_FirstName" 
  (ionChange)="changeToggle(list)">
</ion-toggle>

组件

changeToggle(list)
    console.log(list.Id)