Как показать значение каждого флажка вместо выбранного значения места

Пожалуйста, обновите свою функцию 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. Я обновил код, так что он подхватывается из самого флажка.

Помимо этого, есть небольшие проблемы, которые, я думаю, вы получите, как только решите эту проблему.

Ваш код немного запутан. На самом деле я не могу представить, что вы хотите сделать это, Но..

Первый. Когда у нас есть ввод, в 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'}"
        >

Idem, когда вы перебираете категории, вы можете использовать вспомогательный массив

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>

Что ж, я рассказал вам в вашем посте перед тем, как «преобразовать» список проверенных значений в массив с проверенными значениями, это ТАК

Поэтому вместо создания массива логических значений с 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>

ПРИМЕЧАНИЕ. Я спешу, возможно, в коде есть синтаксическая ошибка, но я надеюсь, что ответ поможет вам несколько