Как изменить содержимое ячейки MaterialTable при клике?

Question

Большая картинка

Привет, Я пытаюсь использовать Angular Material в Angular 7. Я должен использовать таблицу материалов с некоторыми данными. Мой вопрос: есть ли способ изменить содержимое MatCell по клику? Например, рассмотрим приведенную выше таблицу в формате HTML с указанием имени, возраста и телефона людей.

Угловая таблица материалов HTML

<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> занимает {{person.phone}} место с текущим номером , что позволяет мне изменить номер телефона и сохранить новый. как это:

Требуемое содержимое MatCell при клике

<ng-container matColumnDef="phone">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</mat-header-cell>
    <mat-cell *matCellDef="let person">
        <input matInput [value]="person.phone"(focusout)="changePhone($event.target.value, person)" placeholder="Phone">
    </mat-cell>
</ng-container>

Может кто-нибудь помочь мне, пожалуйста?

Answer 1

Вы можете использовать *ngIf с каким-то флагом для выбранного номера телефона, чтобы переключаться между ними.Так, например, если у вас есть что-то подобное в вашем компоненте:

selectedPerson:Person;

... у вас может быть что-то подобное в вашем шаблоне:

...
<ng-container matColumnDef="phone">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</mat-header-cell>
    <mat-cell *matCellDef="let person">
        <span *ngIf="selectedPerson !== person" (click)="selectedPerson = person">
            {{person.phone}}
        </span>
        <input *ngIf="selectedPerson === person" matInput [value]="person.phone"(focusout)="changePhone($event.target.value, person)" placeholder="Phone">
    </mat-cell>
</ng-container>
...