时间戳

首页 > 解决方案 > 角度 10 动态创建按钮列表，其中每个按钮在其 onclick 事件中具有唯一参数

javascript - 角度 10 动态创建按钮列表，其中每个按钮在其 onclick 事件中具有唯一参数

问题描述

ANGULAR 10：我现在被困了好几天。我正在编写一个代码，在一个可观察的事件中，有一个创建 HTML 列表的代码，并且每个项目都必须有一个按钮，因此用户可以删除每个项目。我坚持为每个必须记住“StartDateTime”的按钮创建 onclick 事件，因此当单击它时，它会调用具有正确唯一开始日期和时间的“删除”函数。

两个问题：

  1. 它找不到要执行的函数，所以 Angular 不编译它。该功能在另一个组件中。
  2. 如何正确传递在 HTML 按钮标签中记住的参数？如何为按钮设置数据，以及稍后如何从 onclick EVENT 中获取它？

是的，在问这里之前，我尝试了几个关于如何将参数传递给事件的示例（示例主要针对 JS），但 angular 不喜欢它。

 case 'RSV':
        // Param1 = PCNameID.
        // Param2 = StartDate.
        // Param3 = EndDate.
        // Param4 = ReserveByAccountName.
        var node = document.createElement("LI");
        var textnode = document.createTextNode("Desde [" + stemp[i].Param2 + "] y hasta [" + stemp[i].Param3 + "] reservado para: " + stemp[i].Param4);
        node.appendChild(textnode);
        rsvNode.appendChild(node); 

        var node2 = document.createElement("Button");
        node2.innerText = "Remover esta reserva";

        var SD: string = stemp[i].Param2; // Reserve StartDate.

        node2.onclick ( SD => {
          var StartDate: any;
          StartDate = SD;
          ReservasComponent.RemReserve(StartDate); // Component named ReservasComponent.
        });

        rsvNode.appendChild(node2); 
        break;

标签： javascriptangulartypescripteventsonclick

解决方案

让我举一个例子，说明如何在 Angular 中做到这一点。

我看到你有一个带有类型字段的数组，它可以是'RSV'你想要一个按钮的每个这样的项目。

所以首先，为此创建一个过滤数组：

this.rsvEntries = arr.filter(x => x.type === 'RSV');

接下来，在您的模板中，创建一个ngFor转发器：

<ng-container *ngFor="let b of rsvEntries">
  <li>
    Desde [{{b.Param2}}] y hasta [{{b.Param3}}] reservado para: {{b.Param4}}
  </li>
  <button (click)="removeReservation(b)">Remover esta reserva</button>
</ng-container>

最后，在您的组件中创建removeReservation方法：

removeReservation(rsvEntry) {
  ReservasComponent.RemReserve(rsvEntry.Param2);
}

我希望这可以帮助您开始使用正确的 Angular。

推荐阅读