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

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

0 голосов
/ 28 января 2019

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

<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 к табличным данным, которые выбираются, чтобы я мог отправить их обратно в бэкэнд и выполнять различные операции в зависимости от значения выбора кнопки

Ответы [ 3 ]

0 голосов
/ 28 января 2019

Сначала передайте всю строку. 

(change)="onClickSet(arr)"

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

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)
  }

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

updateSetState() { } for example.
0 голосов
/ 29 января 2019 
 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 просто проверьте консоль после нажатия на кнопку тестирования

0 голосов
/ 28 января 2019

Как насчет передачи индекса 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]); 
}
...