ANGULAR 10 动态创建一个按钮列表，其中每个按钮在其 onclick 事件中都有唯一的参数

Question

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

两个问题：

找不到要执行的函数，所以Angular不编译。该功能在另一个组件中。
如何正确传递在 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;

Answer 1

让我举个例子，说明如何在 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。

ANGULAR 10 动态创建一个按钮列表，其中每个按钮在其 onclick 事件中都有唯一的参数

ANGULAR 10 Creating dynamically a list of buttons where each button has unique parameter in its onclick event

javascript

events

onclick

typescript

angular