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被添加到由angular本身生成的每一行中。

应用程序正在通过exArr从后端获取所有数据，而按钮列绝不是其中的一部分。

我想找到一种方法，将Set/Unset值的此静态列附加到所获取的表数据中，以便我可以将其发送回后端，并根据按钮的选择值执行不同的操作< / p>

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 只需在点击测试按钮后检查控制台

如何在Angular中将列追加到动态生成的表中？

3 个答案: