Angular 6 如何从多个复选框中获取值并发送自答案

【问题标题】：Angular 6 How To Get Values From Multiple Checkboxes and Send in FromAngular 6 如何从多个复选框中获取值并发送自
【发布时间】：2019-03-21 22:20:59
【问题描述】：

我正在尝试在我的表单中使用 mat-checkboxes 作为输入，但在文档中找不到任何关于它的内容。

HTML

<section class="checkbox-section">
 <mat-checkbox [(ngModel)]="bChecked">Blogs</mat-checkbox>
 <mat-checkbox [(ngModel)]="wChecked">Web</mat-checkbox>
 <mat-checkbox [(ngModel)]="oChecked">Online News</mat-checkbox>
 </section>

打字稿

    public form = {
    name: null,
    email: null,
    birthday: null,
    company: null,
    interests: [],
    newsletter: null,
    address: null,
    password: null,
    password_confirmation: null,
  };

我正在尝试获取静态复选框的值，然后推送到我的兴趣数组

【问题讨论】：

如果值是静态的，那么您可以不使用 ngModel 绑定复选框，您可以使用点击事件并基于该事件将值传递给您的函数。

标签： angular typescript angular6

【解决方案1】：

如下更改您的 HTML。

<section class="checkbox-section">
  <mat-checkbox [(ngModel)]="bChecked" (change)="onCheckboxChagen($event, 'Blogs')">Blogs</mat-checkbox>
  <mat-checkbox [(ngModel)]="wChecked" (change)="onCheckboxChagen($event, 'Web')">Web</mat-checkbox>
  <mat-checkbox [(ngModel)]="oChecked" (change)="onCheckboxChagen($event, 'Online News')">Online News</mat-checkbox>
  </section>

由于您需要为复选框值使用静态标签，您可以将静态标签作为第二个参数传递给onCheckboxChagen 方法。根据复选框的值，您可以从interests 数组中获取push 和pop 元素。

TS的变化应该如下。

  onCheckboxChagen(event, value) {

    if (event.checked) {

      this.interests.push(value);
    } 
    if (!event.checked) {

      let index = this.interests.indexOf(value);

      if (index > -1) {

        this.interests.splice(index, 1);
      }
    }
  }

Working Demo

【讨论】：

谢谢，这与我正在寻找的更相似

【解决方案2】：

我不知道这是否符合您的要求，但据我了解，您需要做的就是将您的代码更改为类似的内容，以获取有关哪些复选框实际上是 checked 的信息。

打字稿

public form = {
    ...
    interests: {
      blogs: false,
      web: false,
      onlineNews: false,
    },
    ...
  };

HTML

<section class="checkbox-section">
    <mat-checkbox [(ngModel)]="form.interests.blogs">Blogs</mat-checkbox>
    <mat-checkbox [(ngModel)]="form.interests.web">Web</mat-checkbox>
    <mat-checkbox [(ngModel)]="form.interests.onlineNews">Online News</mat-checkbox>
 </section>

我不知道将值 true 或 false 推送到任何数组有什么意义或提供有关检查哪个输入的信息。

Stackblitz demo

【讨论】：

谢谢！这教会了我一些检查 matboxes 的新技术

【解决方案3】：

您可以在每个mat-checkbox 上添加更改事件并调用以下方法来充实您的数组：

（下面的示例可以使用带有另一个参数的单个方法进行升级，以了解哪个复选框具有更改事件）

<section class="checkbox-section">
 <mat-checkbox [(ngModel)]="bChecked" (change)="assignValues1($event)">Blogs</mat-checkbox>
 <mat-checkbox [(ngModel)]="wChecked" (change)="assignValues2($event)">Web</mat-checkbox>
 <mat-checkbox [(ngModel)]="oChecked" (change)="assignValues3($event)">Online News</mat-checkbox>
 </section>

在我的示例中，要访问新的 boolean 值，您可以这样做：

assingValues1(event: MatCheckboxChange) {
var newVal = event.checked;
// your code here
}

【讨论】：

它将返回真/假，而不是值