如何显示每个复选框值而不是选定的位置值答案

【问题标题】：How to show each checkbox value instead of selected place value如何显示每个复选框值而不是选定的位置值
【发布时间】：2020-12-24 12:02:34
【问题描述】：

首先抱歉，我会尽量解释混乱的问题语言。这是我之前关于stackoverflow 的问题的补充。

我想添加/显示选中复选框的值。我能够部分实现它，但当前的问题是，如果我选择一个复选框，它显示第一个值，在两个复选框上它显示第二个值 2 次而不是第一个 n 第二个，在三个复选框上它显示第三个值 3 次而不是第一个，第二，第三。

您可以在这里查看：https://angular-ivy-d2gbad.stackblitz.io/点击每一行查看表格

代码：https://stackblitz.com/edit/angular-ivy-d2gbad?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

标签： javascript arrays angular typescript

【解决方案1】：

请更新您的addSubData 函数，如下所示 -

addSubData(user: any) {
    let i: any;
    i = document.querySelectorAll('input[type="checkbox"]:checked');
    for(var checked of i) {
      const newUser = Object.assign({}, user)
      newUser.dl = checked.value;
      newUser.sub_impact = "Applicable";
      newUser.co_score = "Added";
      this.userObj.assigned_to.push(newUser);
    }  
  }

问题是您将值分配给同一个用户对象。所以它也在更新数组中的值。您需要使用Object.assign 克隆您的用户对象。

此外，您通过索引遍历数组以获取值，但索引k-1 将始终在 for 循环中返回相同的值，因为它们在 for 循环中是常量。我已经更新了代码，所以它是从复选框本身中提取的。

除此之外，还有一些小问题，我想一旦你解决了这个问题，你就会得到。

【讨论】：

谢谢@nikhil-patil 你能帮我解决你所说的小问题吗？也许我可以在测试人员加薪之前尽快解决它
请重新考虑一种更“有角度的方式”。使用 querySelectorAll(..) 进行检查不是一个好的方法
@KunalVijan，我指的是像-addSubData这样的问题，如果重复调用，它不会清除以前的附加列表。不知道你要不要清除？
@Eliseo，你是对的。最好直接绑定来自 HTML 的值，而不是通过 DOM。由于有很多代码要处理，我只是解决了手头的问题。
@KunalVijan，请检查 - stackblitz.com/edit/angular-ivy-mwbryf

【解决方案2】：

您的代码有点混乱。真的我无法想象你想这样做，但是..

首先。当我们有输入时，在 Angular 中我们使用[(ngModel)]="variable"。这使得在我们的 .ts 中有变量的值，而在 .html 中我们显示了变量的值。

所以，在你的 .ts 中定义四个变量

gender:string
impact:string
fromDate:any
toDate:any

你申请的“表格”必须是这样的

Gender:<select [(ngModel)]="gender">
   ...
</select>
Impact:<select [(ngModel)]="impact">
   ...
</select>
<input type="date" [(ngModel)]="fromDate">
<input type="date" [(ngModel)]="toDate">
          class="form-control form-control-sm"
          name="gender"
          ngModel
          [ngModelOptions]="{updateOn: 'submit'}"
        >

当您遍历可以使用辅助数组的类别时，同理

categories:boolean[]=[]

并使用

<ul *ngFor="let list of dlCategory">
    <div class="form-check form-check-inline">
        <input type="checkbox" [(ngModel)]="categories[i] 
              name="{{list.name}}">
        <label class="form-check-label" for="">{{list.label}}</label>
     </div>
 </ul>

好吧，我在你之前的帖子中告诉你如何“转换”数组中检查值的列表，this SO

因此，我们将创建一个带有 true、false 的布尔数组，我们将让“用户”的属性变为具有选定值的属性

<ul *ngFor="let list of dlCategory">
    <div class="form-check form-check-inline">
        <input #check type="checkbox" 
              [ngModel]="user.categories.indexOf(list.name)>=0" 
              (ngModelChange)="onChange(list.name,check.checked)"
              name="{{list.name}}">
        <label class="form-check-label" for="">{{list.label}}</label>
     </div>
 </ul>

而 onChange 就变成这样了

  onChange(option:string,checked:boolean)
  {
     if (checked && this.user.categories.indexOf(option)<0)
         this.user.categories=[...this.user.categories,option]
         .sort((a,b)=>this.dlCategory.findIndex(x.name==a)>this.dlCategory.findIndex(x.name==b)?1:-1)
    if (!checked)
          this.user.categories=this.user.categories.filter(x=>x!=option)
  }

最后，当我们要显示类别的数据时，我们可以遍历 dlCategory 并且仅当猫在 user.categories 中时才显示

<div *ngFor="cat of dlCategories;let i=index>
  <ng-container *ngIf="user.categories.indexOf(cat.name)>=0">
     {{cat.name}}{{cat.value}}
  <ng-container>
</div>

注意：我很着急，可能代码有语法错误，但我希望答案可以帮助你一些

【讨论】：