angular 内联表格编辑中的 Mat-Table

Question

我想要在单击钢笔图标时将当前行转换为内联可编辑字段的功能。

表看起来像：

当我单击任何一个笔图标时，所有行都变得可编辑。

产品-view.component.ts

import { AfterViewInit, Component, Inject, OnInit, ViewChild } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';

@Component({
  selector: 'app-product-view',
  templateUrl: './product-view.component.html',
  styleUrls: ['./product-view.component.css']
})
export class ProductViewComponent implements OnInit  {

  // declare sku/product price modifier
  productPriceModifiersArray:  ProductPriceModifier[]=[];


  // Product/Sku Price Modifier mat table displayed column
  displayedColumns: string[] = ['id', 'condition', 'setting', 'modifierPercent', 'action'];
  dataSource = new MatTableDataSource<ProductPriceModifier>(this.productPriceModifiersArray);
  isSkuPriceMDetails: boolean = false;

  // Product/Sku Price Modifier form related varialble declaration
  touchedRows:any;
  skuPriceModifiersFormGroup: FormGroup;
  skuPriceModifiersFAControl: FormArray;

  constructor(public dialog: MatDialog,             
              public fb: FormBuilder,
              ) { 
                this.skuPriceModifiersFormGroup = this.fb.group({
                  condition: ['', Validators.required],
                  setting:['',Validators.required],
                  modifierPercent:['', Validators.required],
                  isEditable:[true]
                })

              }


  ngOnInit(): void {
  
    // Get SKU Price Modifiers from MODIFIER_CONDITION table
    this.dataSource.paginator = this.paginator;

    // create from group for skuPriceModifier
    this.skuPriceModifiersFormGroup = this.fb.group({
      skuPriceModifiersTableRow : this.fb.array([
        this.skuInitialFormGroup()
      ])
    })
  }

  ngAfterOnInit() {
    this.skuPriceModifiersFAControl = this.skuPriceModifiersFormGroup.get('skuPriceModifiersTableRow') as FormArray;
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

  // create form group and return from here
skuInitialFormGroup() : FormGroup{
  return this.fb.group({
    condition: ['', Validators.required],
    setting:['',Validators.required],
    modifierPercent:['', Validators.required],
    isEditable:[false]
  })
};
// Add SKU Price Modifiers
addSkuPriceModifiers(){
  // const dialogRef = this.dialog.open(AddSkuPriceModifierComponent,{ });
  alert('Inside skuPriceModifiersTableRow');
  (<FormArray>this.skuPriceModifiersFormGroup.get('skuPriceModifiersTableRow')).push(this.skuInitialFormGroup());
}
// isEditable: boolean = false;

onEditSkuPriceModifier(group: FormGroup){
  // this.isEditable = true;
  // alert('Inside onEditSkuPriceModifier'+JSON.stringify(element));
  console.log(group);
  group.get('isEditable').setValue(true);
}

onDeleteSkuPriceModifier(index: number){
  alert('Delete SPM ID: '+index);
}

get getFormControls() {
  const control = this.skuPriceModifiersFormGroup.get('skuPriceModifiersTableRow') as FormArray;
  return control;
}


}

产品-view.components.html

<mat-accordion class="product-details-headers-align">
      <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            SKU Price Modifiers
          </mat-panel-title>
          <mat-panel-description>
            <span></span>
            <mat-icon color="primary" (click)="addSkuPriceModifiers()">add_box</mat-icon>
          </mat-panel-description>
        </mat-expansion-panel-header>
        <span class="no-detail" *ngIf="!isSkuPriceMDetails">No Detail Available!</span>
        <span>
          <form [formGroup]="skuPriceModifiersFormGroup">
            <ng-container formArrayName="skuPriceModifiersTableRow">
              <ng-container *ngFor="let group of getFormControls.controls ; let i=index" [formGroupName]="i">
              <table class="table qunatityTable" mat-table [dataSource]="dataSource">
                <ng-container matColumnDef="id" class="thead-dark">
                  <th *matHeaderCellDef> ID </th>
                  <td *matCellDef="let element"> {{ element.id }} </td>
                </ng-container>

                <ng-container matColumnDef="condition">
                  <th *matHeaderCellDef> Condition </th>
                  <td *matCellDef="let element;">
                    <span *ngIf="!group.get('isEditable')?.value">
                      {{element.condition}}
                    </span>
                    <span *ngIf="group.get('isEditable')?.value">
                      <mat-form-field>
                        <mat-label>Condition</mat-label>
                        <input matInput placeholder="Condition" formControlName="condition">
                      </mat-form-field>
                    </span>
                  </td>
                </ng-container>

                <ng-container matColumnDef="setting">
                  <th *matHeaderCellDef> Setting </th>
                  <td *matCellDef="let element;"> 
                    <span *ngIf="!group.get('isEditable')?.value">
                      {{element.setting}}
                    </span>
                    <span *ngIf="group.get('isEditable')?.value">
                      <mat-form-field >
                        <mat-label>Setting</mat-label>
                        <input matInput placeholder="Setting" formControlName="setting">
                      </mat-form-field>
                  </span>
                  </td>
                </ng-container>

                <ng-container matColumnDef="modifierPercent">
                  <th *matHeaderCellDef> Modifier Percent </th>
                  <td *matCellDef="let element;">
                    <span *ngIf="!group.get('isEditable')?.value">
                      {{element.modifierPercent}}
                    </span>
                    <span *ngIf="group.get('isEditable')?.value">
                      <mat-form-field >
                        <mat-label>Modifier Percent</mat-label>
                        <input matInput placeholder="Enter Modifier Percent" formControlName="modifierPercent">
                      </mat-form-field>
                    </span>
                  </td>
                </ng-container>
            
                <ng-container matColumnDef="action">
                  <th *matHeaderCellDef> Action </th>
                  <td *matCellDef="let element">
                    <button mat-icon-button>
                      <mat-icon color="warn" (click)="onDeleteSkuPriceModifier(element.id)">delete</mat-icon>
                    </button>
                    <button mat-icon-button>
                      <mat-icon color="primary" (click)="onEditSkuPriceModifier(group)">edit</mat-icon>
                    </button>
                  </td>
                </ng-container>

                <tr class="thead-dark" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; let i = index; columns: displayedColumns;"></tr>

              </table>
              </ng-container>
            </ng-container>
          </form><!-- End of form tag-->
        
          <mat-paginator [pageSizeOptions]="[5, 10, 50]" showFirstLastButtons></mat-paginator>
        </span>
      </mat-expansion-panel>
    </mat-accordion>

我必须更改以使笔单击仅该行应变为可编辑

Answer 1

我想要在单击钢笔图标时将当前行转换为内联可编辑字段的功能。

表看起来像：

当我单击任何一个笔图标时，所有行都变得可编辑。

产品-view.component.ts

import { AfterViewInit, Component, Inject, OnInit, ViewChild } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';

@Component({
  selector: 'app-product-view',
  templateUrl: './product-view.component.html',
  styleUrls: ['./product-view.component.css']
})
export class ProductViewComponent implements OnInit  {

  // declare sku/product price modifier
  productPriceModifiersArray:  ProductPriceModifier[]=[];


  // Product/Sku Price Modifier mat table displayed column
  displayedColumns: string[] = ['id', 'condition', 'setting', 'modifierPercent', 'action'];
  dataSource = new MatTableDataSource<ProductPriceModifier>(this.productPriceModifiersArray);
  isSkuPriceMDetails: boolean = false;

  // Product/Sku Price Modifier form related varialble declaration
  touchedRows:any;
  skuPriceModifiersFormGroup: FormGroup;
  skuPriceModifiersFAControl: FormArray;

  constructor(public dialog: MatDialog,             
              public fb: FormBuilder,
              ) { 
                this.skuPriceModifiersFormGroup = this.fb.group({
                  condition: ['', Validators.required],
                  setting:['',Validators.required],
                  modifierPercent:['', Validators.required],
                  isEditable:[true]
                })

              }


  ngOnInit(): void {
  
    // Get SKU Price Modifiers from MODIFIER_CONDITION table
    this.dataSource.paginator = this.paginator;

    // create from group for skuPriceModifier
    this.skuPriceModifiersFormGroup = this.fb.group({
      skuPriceModifiersTableRow : this.fb.array([
        this.skuInitialFormGroup()
      ])
    })
  }

  ngAfterOnInit() {
    this.skuPriceModifiersFAControl = this.skuPriceModifiersFormGroup.get('skuPriceModifiersTableRow') as FormArray;
  }

  @ViewChild(MatPaginator) paginator: MatPaginator;

  // create form group and return from here
skuInitialFormGroup() : FormGroup{
  return this.fb.group({
    condition: ['', Validators.required],
    setting:['',Validators.required],
    modifierPercent:['', Validators.required],
    isEditable:[false]
  })
};
// Add SKU Price Modifiers
addSkuPriceModifiers(){
  // const dialogRef = this.dialog.open(AddSkuPriceModifierComponent,{ });
  alert('Inside skuPriceModifiersTableRow');
  (<FormArray>this.skuPriceModifiersFormGroup.get('skuPriceModifiersTableRow')).push(this.skuInitialFormGroup());
}
// isEditable: boolean = false;

onEditSkuPriceModifier(group: FormGroup){
  // this.isEditable = true;
  // alert('Inside onEditSkuPriceModifier'+JSON.stringify(element));
  console.log(group);
  group.get('isEditable').setValue(true);
}

onDeleteSkuPriceModifier(index: number){
  alert('Delete SPM ID: '+index);
}

get getFormControls() {
  const control = this.skuPriceModifiersFormGroup.get('skuPriceModifiersTableRow') as FormArray;
  return control;
}


}

产品-view.components.html

<mat-accordion class="product-details-headers-align">
      <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            SKU Price Modifiers
          </mat-panel-title>
          <mat-panel-description>
            <span></span>
            <mat-icon color="primary" (click)="addSkuPriceModifiers()">add_box</mat-icon>
          </mat-panel-description>
        </mat-expansion-panel-header>
        <span class="no-detail" *ngIf="!isSkuPriceMDetails">No Detail Available!</span>
        <span>
          <form [formGroup]="skuPriceModifiersFormGroup">
            <ng-container formArrayName="skuPriceModifiersTableRow">
              <ng-container *ngFor="let group of getFormControls.controls ; let i=index" [formGroupName]="i">
              <table class="table qunatityTable" mat-table [dataSource]="dataSource">
                <ng-container matColumnDef="id" class="thead-dark">
                  <th *matHeaderCellDef> ID </th>
                  <td *matCellDef="let element"> {{ element.id }} </td>
                </ng-container>

                <ng-container matColumnDef="condition">
                  <th *matHeaderCellDef> Condition </th>
                  <td *matCellDef="let element;">
                    <span *ngIf="!group.get('isEditable')?.value">
                      {{element.condition}}
                    </span>
                    <span *ngIf="group.get('isEditable')?.value">
                      <mat-form-field>
                        <mat-label>Condition</mat-label>
                        <input matInput placeholder="Condition" formControlName="condition">
                      </mat-form-field>
                    </span>
                  </td>
                </ng-container>

                <ng-container matColumnDef="setting">
                  <th *matHeaderCellDef> Setting </th>
                  <td *matCellDef="let element;"> 
                    <span *ngIf="!group.get('isEditable')?.value">
                      {{element.setting}}
                    </span>
                    <span *ngIf="group.get('isEditable')?.value">
                      <mat-form-field >
                        <mat-label>Setting</mat-label>
                        <input matInput placeholder="Setting" formControlName="setting">
                      </mat-form-field>
                  </span>
                  </td>
                </ng-container>

                <ng-container matColumnDef="modifierPercent">
                  <th *matHeaderCellDef> Modifier Percent </th>
                  <td *matCellDef="let element;">
                    <span *ngIf="!group.get('isEditable')?.value">
                      {{element.modifierPercent}}
                    </span>
                    <span *ngIf="group.get('isEditable')?.value">
                      <mat-form-field >
                        <mat-label>Modifier Percent</mat-label>
                        <input matInput placeholder="Enter Modifier Percent" formControlName="modifierPercent">
                      </mat-form-field>
                    </span>
                  </td>
                </ng-container>
            
                <ng-container matColumnDef="action">
                  <th *matHeaderCellDef> Action </th>
                  <td *matCellDef="let element">
                    <button mat-icon-button>
                      <mat-icon color="warn" (click)="onDeleteSkuPriceModifier(element.id)">delete</mat-icon>
                    </button>
                    <button mat-icon-button>
                      <mat-icon color="primary" (click)="onEditSkuPriceModifier(group)">edit</mat-icon>
                    </button>
                  </td>
                </ng-container>

                <tr class="thead-dark" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; let i = index; columns: displayedColumns;"></tr>

              </table>
              </ng-container>
            </ng-container>
          </form><!-- End of form tag-->
        
          <mat-paginator [pageSizeOptions]="[5, 10, 50]" showFirstLastButtons></mat-paginator>
        </span>
      </mat-expansion-panel>
    </mat-accordion>

我必须更改以使笔单击仅该行应变为可编辑