为什么模态表中的按钮不起作用？答案

【问题标题】：Why the button inside table in modal not working?为什么模态表中的按钮不起作用？
【发布时间】：2019-07-11 16:42:06
【问题描述】：

为什么表格行内的按钮不起作用？

我只希望它通过调用modal-basic.ts 文件中的函数在控制台中打印一条消息。

modal-basic.html：

<td><button (click)="test()">Test</button></td>

modal-basic.ts：

test() {
  console.log("Test...");
}

您可以在以下 StackBlitz 中找到minimal reproducible example：https://stackblitz.com/edit/angular-bpp4uh

【问题讨论】：

欢迎来到 StackOverflow！到目前为止，您尝试过什么吗？ StackOverflow 不是免费的代码编写服务，希望您先尝试解决自己的问题。请更新您的问题以显示您已经尝试过的内容，以最小、完整且可验证的示例显示您面临的具体问题。 meta.stackoverflow.com/questions/261592/…更多信息，请看如何提出一个好问题（stackoverflow.com/help/how-to-ask），并参观网站（stackoverflow.com/tour）
我没有更多的时间来查看它，但我确实注意到将它从按钮更改为其他任何东西都会使函数可执行。例如将您的 <td><button (click)="test()">Test... 更改为 <td><p (click)="test()">Test...。当您执行此操作并第一次单击<p> 标记时，它不会执行，但第二次单击<p> 标记时它将执行。非常奇怪。祝你好运。
按钮不起作用的原因是从模态模板所在的ng-template无法访问该方法。
我不认为在ng-template 是这里的问题。您可以将<button (click)="test()">Test</button> 放在<tr> 标记之外，然后它就会工作（仍然在模态中）。这绝对不是预期的行为
@Edric 起初我也这么认为，我认为上下文不同。然而，正如@Andrew Hill 所写，当您将button 更改为p 时，它开始工作。将trackBy: trackByFn 添加到*ngFor，其中trackByFn = (index, item) => index 也修复了click 处理程序。

标签： angular ng-bootstrap

【解决方案1】：

我做了一些改动。

在 ts 中删除了这段代码。

 get countries(): Country[] {
    return COUNTRIES
      .map((country, i) => ({id: i + 1, ...country}))
      .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize);
  }

声明

countries = [];

在ngOnit或constructor()中添加

{this.countries = COUNTRIES;}

在html中

 *ngFor="let country of countries | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize"

<ngb-pagination
  [(page)]="page"
  [pageSize]="pageSize"
  [collectionSize]="countries.length"></ngb-pagination>

这是链接：

https://stackblitz.com/edit/angular-8dxiv4

【讨论】：

如果这是您的问题，请在上方发布。在这里，您正在回答问题。