Angular 在表格单元格上单击，更改为“选择框”

我试图在单击时将表格单元格更改为选择框。这是我到目前为止所拥有的，但它看起来非常、非常笨重。我是否在Angular2中遗漏了更好地满足我需要的东西

账户页面.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>

受款人
{{{transaction.payee.name}

{{transaction.paye.name}
试验

账户页面.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;
  }

}

从'@angular/core'导入{Component，OnInit}；
从'@angular/router'导入{ActivatedRoute}；
从'src/app/core/services/transactions.service'导入{TransactionService}；
从“rxjs/operators”导入{concatMap}；
从'rxjs'导入{可观察的}；
@组成部分({
选择器：“应用程序帐户页”，
templateUrl:“./account page.component.html”，
样式URL:['./帐户页.component.css']
})
导出类AccountPageComponent实现OnInit{
显示的列：字符串[]=['收款人']；
数据来源：可观察；
show=false；
交易金额：可观察；
构造函数（私有路由：ActivatedRoute，私有transactionService:transactionService）{}
ngOnInit（）：void{
this.transactions$=this.getTransactions（）；
this.dataSource=this.getTransactions（）；
}
getTransactions（）：可观察{
返回此.route.params.pipe（concatMap（params=>{
const accountId=params.id；
返回此.transactionService.getTransactionsByAccountId（accountId）；
}));
}
onClick（）{
console.log（'clicked'）；
this.show=！this.show；
}
}

---

这显然是一个MVP。名称/收款人列是我希望它在表格单元格中显示为文本的位置；但是，单击时，它会动态更改为

/

。基本上，它只是更改

和

元素的显示属性，并触发显示css。谢谢大家!

我不确定你是不是来了

如果您想动态更改表中显示的元素，那么我建议您使用结构指令，如

*ngIf

（），而不是

[ngStyle]=“display”

属性

例如这样的事情：

受款人
{{transaction.paye.name}

{{transaction.paye.name}
试验

---

如果这不是你的问题，那么请告诉我更多细节。

Doh！不知道我怎么会错过这个。更好，也正是我想要的。非常感谢。