Question

我正在尝试使用mat-table构建内联可编辑表。但是我无法基于每行的按钮单击分别启用/禁用每行。当前，如果我单击一个编辑按钮，则表中的整个文本字段都将启用/禁用。

您能帮我解决这个问题吗？

在app.component.html

中

<mat-table #table [dataSource]="dataSource">

                    <!-- Name Column -->
                    <ng-container matColumnDef="name">
                        <mat-header-cell *matHeaderCellDef>
                            <h6><b> Name</b></h6>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let member"><input  [disabled]='disableTextbox' type="text" class="form-control" [value]="member.name"></mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="action">
                        <mat-header-cell *matHeaderCellDef>
                            <h6><b> Action </b></h6>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let member">
                            <a (click)="edit($event)"> 
                                <i class="fa fa-edit" style="font-size:20px;color: #673ab7"></i></a> |

                        </mat-cell>
                    </ng-container>
                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>


                </mat-table>

在app.component.ts

中

...
 edit(event){
    this.disableTextbox=!this.disableTextbox;
  }

Answer 1

请尝试使用此代码。工作正常

在app.component.html

中

<mat-table #table [dataSource]="dataSource">

                    <!-- Name Column -->
                    <ng-container matColumnDef="name">
                        <mat-header-cell *matHeaderCellDef>
                            <h6><b> Name</b></h6>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let member"><input  [disabled]=member.disableTextbox type="text" class="form-control" [value]="member.name"></mat-cell>
                    </ng-container>

                    <ng-container matColumnDef="action">
                        <mat-header-cell *matHeaderCellDef>
                            <h6><b> Action </b></h6>
                        </mat-header-cell>
                        <mat-cell *matCellDef="let member">
                            <button value="≈" (click)="edit($event,member)"> 
                               disableTextbox</button> 

                        </mat-cell>
                    </ng-container>
                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>


                </mat-table>

在app.componet.ts中

edit(event,selMember){
    selMember.disableTextbox = !selMember.disableTextbox;
  }

角垫表启用/禁用基于按钮单击的行

1 个答案: