无法使用 ngModel 获取复选框的值

Question

我尝试获取复选框的值，但在我的控制台中未定义。当我能够获取到值时，我会将数据保存到 firebase 中。

              <ion-item *ngFor='let rep of reponse;let i = index'>
                  <ion-label>{{rep.name}}</ion-label>
                    <ion-checkbox 
                           [(ngModel)]="rep.checked"
                           color="primary" 
                           (ngModelChange)="updatedCheckList(i)"
                           slot="start"
                           >
                    </ion-checkbox>
                  </ion-item>
 <ion-button (click)="onClick()"></ion-button>

和我的打字稿代码：例如，我只是尝试 console.log 在我的 onClick() 函数中的值。

private rep: any = {};
reponse = [
  {
    name: 'test',
    checked: false
  },
  {
    name: 'test2',
    checked: false
  },
  {
    name: 'test3',
    checked: false
  },
];

  constructor() { }

  ngOnInit() {

  }

  updatedCheckList(itemIndex: number) {
    this.reponse.forEach((rep, index) => {
      if (itemIndex !== index) {
        rep.checked = false;
      }
    });
  }

  onClick() {
    console.log(this.rep.name);
  }

不知道这样对不对，但我找到了解决办法。在 updateCheckList 中我有：this.index = itemIndex; 这是我的 .ts 文件中的内容。

index: number;
 onClick() {
console.log(this.reponse[this.index].name);
  }

Answer 1

您无需使用 updatedCheckList 自行管理它，只需将 ngModel 设置为 reponse[i].checked 即可在单击复选框时自动切换它：

            <ion-item *ngFor='let rep of reponse;let i = index'>
              <ion-label>{{rep.name}}</ion-label>
                <ion-checkbox 
                       [(ngModel)]="reponse[i].checked"
                       color="primary" 
                       slot="start"
                       >
                </ion-checkbox>
            </ion-item>
            <ion-button (click)="onClick()"></ion-button>

更新 - 如何访问值

你的值一直都在，但模板中的i只在模板中。

在您选择的任何事件中，例如按钮的单击事件，您都可以访问 reponse 数组。

我现在已经看到你的另一个问题了，你是否还想合并取消选择的其他人（因为这不是一个好主意，用户希望单选按钮是相互排斥的，而复选框是尽可能多的"as as you like")

如果您想获得一个特定的复选框值，那么您只需使用索引号：

let checked = this.reponse[1].checked;

如果你想循环它们，你可以放入它自己的 for 循环并用它做一些事情：

onClick() {
   for(let index = 0; index < reponse.length; index++) {
     console.log(`Index ${index) has a checked value of ${reponse[index].checked}`);
   }
}

这将显示所有值。

顺便说一下，我使用的是 template strings，这是一种在打字稿中进行字符串插值的好方法，非常可读。

此外，这是学习基础知识的好方法，但与 Firebase 的实际工作方式相去甚远。你需要学习一大堆概念来理解 firebase 如何保存它的数据，你绝对不会仅仅通过自己尝试使用代码来理解这些数据。您需要为此找到合适的教程。它使用可观察的流和实时更新，它不像您可能使用 mysql 和 php 或类似方式完成的传统方式。

无法使用 ngModel 获取复选框的值

unable to get value of checkbox using ngModel

angular

ionic4

更新 - 如何访问值