HTML/Angular-将On Click值传递给同一组件上的另一个HTML元素

Question

我们对此一无所知，非常感谢您的帮助。

我有一个垫子表，上面显示了我的消防仓库的特定数据范围，我希望单击一个特定的行并将其显示在表下方的列表中，我可以获得行数据使用onClick，我想在同一组件上的列表上传递数据。

组件HTML

<!-- The following are on the same component, just different HTML element-->

<tr mat-row 
*matRowDef="let row; columns: displayedColumns;"
(click)="onRowsClicked(row)"

></tr>



<ul class="account-information-list">
<li>Customer Number:</li>
<li>Account Number:</li>
<li>Customer Name:</li>

组件TS

onRowsClicked(rows: Customer) {
console.log('Row Clicked', rows)

}

Answer 1

创建一个变量来存储所选行的数据，在UL内部使用字符串插值来显示所述数据。

selectedRow: Customer = null;
onRowsClicked(row: Customer) {
this.selectedRow = row;
}
<ul class="account-information-list" *ngIf="selectedRow">
<li>Customer Number: {{selectedRow.customerNumber}}</li>
<li>Account Number: {{selectedRow.accountNumber</li>
<li>Customer Name: {{selectedRow.customerName}}</li>

当然，要改变整个customer行.customerNumber等，以匹配customer对象中的实际属性。我记不起这是否需要双向绑定，我认为不会。