Как добавить столбец в динамически сгенерированную таблицу в Angular?

Question

У меня есть приложение, в котором я получаю данные из базы данных и отображаю их на веб-интерфейсе в табличном формате.

<table>
   <thead>
    <tr>
      <th>Name </th>
      <th>Value1 </th>
      <th>Value2 </th>
      <th>Result </th>
      <th>Set/Unset </th>
    <tr>
   </thead>
   <tbody>
      <tr *ngFor="let arr of exArr; let i = index">
        <td>{{ arr.Name }}</td>
        <td>{{ arr.Value1 }}</td>
        <td>{{ arr.Value2 }}</td>
        <td>{{ arr.Result }}</td>
        <td>
           <form [formGroup]="myForm" class="form-inline">
                <div class="form-group">
                  <div class="btn-group" btnRadioGroup formControlName="radio">
                    <label btnRadio="Include" class="btn btn-primary" tabindex="0" role="button" (click)="onClickSet()">Set</label>
                    <label btnRadio="Exclude" class="btn btn-primary" tabindex="0" role="button" (click)="onClickUnset()">Unset</label>
                  </div>
                </div>
            </form>
        </td>
      </tr>
   </tbody>
</table>

ngOnInit() {

    this.myForm = this.formBuilder.group({
      radio: null
    });

    this.dataService.getReport()
    .subscribe(exArr =>
      this.exArr = exArr
    )

  }

Как показано в коде, только четыре значения выбираются из базы данных, в то время как button / Set/Unset добавляется к каждой строке, которая генерируется из самого угла.

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

Я хочу найти способ добавить этот статический столбец Set/Unset значения в табличные данные, которые извлекаются, чтобы я мог отправить их обратно на сервер и выполнять различные операции в зависимости от значения выбора кнопки

Answer 1

Как насчет передачи индекса i к обоим методам onClickSet а также onClickUnset когда данные не имеют уникального идентификатора.

наценка

<label btnRadio="Include"
       class="btn btn-primary"
       tabindex="0"
       role="button" 
       (click)="onClickSet(i)">Set</label>
<label btnRadio="Exclude"
       class="btn btn-primary"
       tabindex="0"
       role="button"
       (click)="onClickUnset(i)">Unset</label>

контроллер:

public onClickSet(index:number){
    console.log('onClickSet item is ', this.exArr[index]); 
}

public onClickUnset(index:number){
    console.log('onClickUnset item is ', this.exArr[index]); 
}

Answer 2

Сначала пройдите во весь ряд.

(change)="onClickSet(arr)"

С помощью этого найдите строку в вашем массиве данных, используя find, а затем обновите метку следующим образом: это делается по имени, было бы лучше, если бы вы использовали id.

onClickSet(arr) {    
    console.log(arr);

    const a = this.exArr.find(x => x.Name == arr.Name);
    console.log(a);

    a.label = "set";

    console.log(this.exArr)
  }

Сделайте то же самое для unset функции или создайте метод для уменьшения количества повторяющегося кода.

updateSetState() { } for example.

Answer 3

 name = 'Angular';
  exArr=[{Name:"a",Value1:"v1"},
  {Name:"b",Value1:"v2"},
  {Name:"c",Value1:"v3"}]

  ngOnInit() {
    for(var i=0;this.exArr.length;i++){
      this.exArr[i]["label"]=null
    }
  }
  constructor(private fb: FormBuilder){
  }
onClickSet(i,set){
this.exArr[i]["label"]=set
}
onClickUnset(i,unset){
  this.exArr[i]["label"]=unset

}
test(){
  console.log(this.exArr)
}

<table>
   <thead>
    <tr>
      <th>Name </th>
      <th>Value1 </th>
      <th>Value2 </th>
      <th>Result </th>
      <th>Set/Unset </th>
    <tr>
   </thead>
   <tbody>
      <tr *ngFor="let arr of exArr; let i = index">
        <td>{{ arr.Name }}</td>
        <td>{{ arr.Value1 }}</td>
        <td>{{ arr.Result }}</td>
        <td>
                  <div class="btn-group" >
<input type="radio" id="ritemb" (change)="onClickSet(i,'set')" >    set
<input type="radio" id="ritemb" (change)="onClickUnset(i,'unset')">                 Unset
                  </div>
        </td>
      </tr>
   </tbody>
</table>
<button (click)="test()">test</button>

Я надеюсь, что это поможет вам, вам не нужны формы https://stackblitz.com/edit/angular-8uzuyr?file=src/app/app.component.ts просто проверьте консоль после нажатия на кнопку тестирования