如何根据自定义 ID 切换 table 行

Question

我在 Angular 应用程序中使用的 HTML 文件中有一个 table。我需要检索用户订单并在 table 中列出订单。如果用户单击 Review 按钮，我希望用户能够看到该特定订单的相关订单项。查看按钮应展开一个包含相关订单项目的新行。如何以编程方式实现这一目标？我尝试将订单 ID 作为行的 ID 传递，但不幸的是，这不起作用。

<script type="text/javascript">
  function show_hide_row(row) {
    $("#" + row).toggle();
  }
</script>

<table class="table" cellpadding=10>
      <caption>The total amount of orders is {{orders.length}}</caption>
      <tbody *ngFor="let order of orders" >
          <td>
            <a class="link" style="font-weight: bold; cursor: pointer;" onclick="show_hide_row(order.orderId);">Review</a>
          </td>
        </tr>
        <tr id="{{order.orderId}}" class="hidden_row">
          <p>Here comes the related order items for the expanded order</p> 
        </tr>
      </tbody>
</table>

如有任何帮助，我们将不胜感激！谢谢

Answer 1

我已经按照以下步骤解决了这个问题：

1- 我在 assets/js 文件夹中创建了一个 JS 文件 2-我已将上述功能添加到 JS 文件中。 3- 我已将文件添加到 angular.json 文件

"scripts": ["src/assets/js/common.js"]

4- 运行命令

ng serve

5-在组件模块ts文件中我已经声明了一个与JS文件中的函数名称相匹配的函数

declare function show_hide_row(row: any): any;

6-我已经创建了一个同名的public函数，这将在HTML文件中用于调用JS函数

public show_hide_row(row: any): void {
    show_hide_row(row);
  }

7- 我已经通过添加

测试了该功能

function show_hide_row(row) {
    $("#" + row).toggle();
    **console.log(row);**
}

8- 在 HTML 文件中我正在使用 Angular 事件绑定：

(click)="this.show_hide_row(order.orderId)"

9- 用浏览器测试它，它可以工作，我能够看到该行的自定义 ID。

如何根据自定义 ID 切换 table 行

How to toggle table row based on custom id

html

javascript

jquery

angular