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

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.component.ts

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