单击 table 单元格，更改为 select 框

Question

我正在尝试通过单击将 table 单元格更改为 select 框。这是我到目前为止所拥有的，但它看起来非常非常笨重。我是否遗漏了 Angular2 中可以更好地满足我需求的东西？

帐号-page.component.html

<table mat-table [dataSource]="dataSource | async" class="mat-elevation-z8">
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    <!-- Name Column -->
    <ng-container matColumnDef="payee">
        <th mat-header-cell *matHeaderCellDef> Payee </th>
        <td mat-cell *matCellDef="let transaction" (click)="onClick()">
            <p [ngStyle]="{'display': show === false ? 'block' : 'none'}">{{transaction.payee.name}}</p>
            <mat-select [ngStyle]="{'display': show === true ? 'block' : 'none'}">
                <mat-option value="{{transaction.payee.name}}">{{transaction.payee.name}}</mat-option>
                <mat-option>Test</mat-option>
            </mat-select>
        </td>
    </ng-container>
</table>

帐号-page.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TransactionsService } from 'src/app/core/services/transactions.service';
import { concatMap } from 'rxjs/operators';
import { Observable, of } from 'rxjs';

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

  displayedColumns: string[] = ['payee'];
  dataSource: Observable<any[]>;
  show = false;

  transactions$: Observable<any[]>;

  constructor(private route: ActivatedRoute, private transactionService: TransactionsService) { }

  ngOnInit(): void {
    this.transactions$ = this.getTransactions();
    this.dataSource = this.getTransactions();
  }

  getTransactions(): Observable<any[]> {
    return this.route.params.pipe(concatMap(params =>  {
      const accountId = params.id;
      return this.transactionService.getTransactionsByAccountId(accountId);
    }));
  }

  onClick() {
    console.log('clicked');
    this.show = !this.show;
  }

}

这显然是一个 MVP。 Name/payee 列是我希望它在 table 单元格中显示为文本的位置；但是，单击时，它会动态更改为 <select>/<mat-select>。基本上它只是改变 <p> 和 <select> 元素的显示属性并翻转显示 css。谢谢！

Answer 1

我不确定我是否让你明白了。

如果您想动态更改 table 中显示的元素，那么我建议您使用结构指令，例如 *ngIf (https://angular.io/guide/structural-directives) 而不是[ngStyle]='display' 属性。

例如这样的事情：

<table mat-table [dataSource]="dataSource | async" class="mat-elevation-z8">
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    <!-- Name Column -->
    <ng-container matColumnDef="payee">
        <th mat-header-cell *matHeaderCellDef> Payee </th>
        <td mat-cell *matCellDef="let transaction" (click)="onClick()">
            <p *ngIf="!show">{{transaction.payee.name}}</p>
            <mat-select *ngIf="show">
                <mat-option value="{{transaction.payee.name}}">{{transaction.payee.name}}</mat-option>
                <mat-option>Test</mat-option>
            </mat-select>
        </td>
    </ng-container>
</table>

如果这不是您的问题，请提供更多详细信息。

单击 table 单元格，更改为 select 框

On table cell click, change to select box

angular

angular10