Блог

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

HTML:

 <div class="card" *ngFor="let table of schema.tables | keyvalue">
        <div class="card-header border-top headerCollapse p-0" [attr.id]="'heading'   table.key">
            <h5 class="mb-0">
                <button class="collapsed AccodeonTitle activeAccodeonTitle" data-toggle="collapse" [attr.data-target]="'#collapse'   table.key" aria-expanded="false" [attr.aria-controls]="'#collapse'   table.key">
                    <span>{{table.value.name}}</span>
                </button>
            </h5>
            <svg data-toggle="collapse" [attr.data-target]="'#collapse'   table.key" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-up collapseIcon collapseIconActive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
              </svg>
        </div>
        <div [attr.id]="'collapse'   table.key" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body p-0">
                <table class="ConfigurationTable selectTable pl-5">

                    <thead class="theadSelectTable">
                        <tr>
                            <th>
                                <div class="d-flex align-items-center">
                                    <span class="colLogo"></span>
                                    <span class="d-inline-block pl-3">Columnas</span>
                                </div>
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody class="">
                        <tr *ngFor="let column of table.value.columns | keyvalue">
                            <td>
                                <input (click)="alert($event)" type="checkbox" aria-label="Checkbox for following text input">
                                <span class="pl-3">{{column.value.name}}</span>
                            </td>
                            <td class="selectProperties">
                                <select class="custom-select customPlaceHolder tablePlaceHolder custom-select-table">
                            <option selected>Base de datos_06</option>
                            <option value="1">PER</option>
                            <option value="2">NUM</option>
                            <option value="3">DATA</option>
                          </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
 

Объект:

     export interface SchemeDB {
    name:String;
    tables:Map<String,Table>;
}
export interface Table {
  name:String;
  columns:Map<String,Column>;
}

export interface Column {
    checked:boolean;
    typeEnt:String
    name:String;
    type:String;
    size:number;
    primaryKey:boolean;
}
 

Мне нужно изменить переменную checked и typeentинтерфейса столбца

Вы можете создать массив и вставить столбец в массив, проверив его

 checkedColumns = {};

onChecked(event,column,tableName){
 if(!this.checkedColumns[tableName])
   this.checkedColumns[tableName] = []; //initialize as blank array

 if(event.checked){ //if checking it then add to the array
  this.checkedColumns[tableName].push(column)
 } else { // if unchecking remove from array
  let index = this.checkedColumns[tableName].indexOf(column)
  if(index !== -1)
    this.checkedColumns[tableName].splice(index,1)
 }
}
 

В html вы можете указать

 <input (click)="onChecked($event,column,table.name)" type="checkbox" aria-label="Checkbox for following text input">
 

Таким образом, при сохранении у вас есть все столбцы, которые отмечены.