如何在单击时更改MaterialTable单元格内容？

Question

大图

嗨， 我正在尝试在Angular 7中使用Angular Material。 我必须使用带有一些数据的Material表。 我的问题是：是否可以通过点击更改MatCell内容？ 例如，考虑上面HTML中的表格，其中包含人们的姓名，年龄和电话。

角度材料表HTML

if (condition) {
    // do something
} else {
    // do something else
}

什么有效

用于显示数据，分页，过滤器和排序标题的表非常有用！

我需要什么

我想做的是当我单击手机单元中的文本时，<mat-form-field> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Phone"> </mat-form-field> <mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort > <ng-container matColumnDef="name"> <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell> <mat-cell *matCellDef="let person" >{{person.name}}</mat-cell> </ng-container> <ng-container matColumnDef="age"> <mat-header-cell *matHeaderCellDef mat-sort-header>Age</mat-header-cell> <mat-cell *matCellDef="let person">{{person.age}}</mat-cell> </ng-container> <ng-container matColumnDef="phone"> <mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</mat-header-cell> <mat-cell *matCellDef="let person">{{person.phone}}</mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> <mat-paginator [length]="100" [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> 标签会与当前号码放在一起<input> ，让我可以更改电话号码并保存新的电话号码。 像这样：

点击所需的MatCell内容

{{person.phone}}

有人可以帮我吗？

Answer 1

您可以对选定的电话号码使用带有某种标志的def test(): some_var_set=set('abca') print("here is the set:",some_var_set,type(some_var_set)) some_var_string=''.join(some_var_set) print("here is the string:",some_var_string,type(some_var_string)) test() 在两者之间进行交换。因此，例如，如果您的组件中包含以下内容：

*ngIf

...您的模板中可能包含以下内容：

selectedPerson:Person;