Question

我有一个正在运行的管理应用程序，其中显示了运行时带有一些信息的服务列表（我去年开发了它）。现在，我需要通过单击使其显示“最后请求”信息。但是我有一个问题。这是MyManagementComponent.html文件中的一段代码：

    <tr *ngFor="let item of this.executorsData.executors">
        <td>...</td>
        <td class="text-center">
         [...]
          <div *ngIf="item.lastRequest != undefined">
            <div style="width:100%; align-content: right; text-align: right">
              <a onclick='$("#lastReq" + $item.id).toggle()'>last request</a>
              <div id="lastReq{{item.id}}" style="display: block; position: absolute">...placeholder for information...</div>
            </div>
          </div>
        </td>
    </tr>

如您所见，我需要将 item.id 的值传递给函数调用。在这种情况下，jQuery表达式也可以创建一个单独的函数。问题是：

当我使用它在编译期间报告错误-模板解析错误：解析器错误：得到了插值（{{}}）期望表达的地方

当我使用 -我遇到运行时错误-MyManagementComponent.html：103错误TypeError：无法读取未定义的属性“ id”

当我使用时-我遇到运行时错误-未捕获的ReferenceError：未在HTMLAnchorElement上定义该项。 onclick（交易次数：1）

然后如何将 item.id 的值作为参数放入函数调用中？在这种情况下-我需要“ lastReq” + item.id 。

注意：存在item.id字段，它显示在此表的第一个单元格中（我在此处省略了此部分）

谢谢。

PS。说到使用的版本“ @ angular / core”：“ ^ 6.0.3”。

Answer 1

如果要调用单击函数，则角度可能会出现这种方法的问题。使用{{}}在HTML代码中编写函数名称可能会导致意外问题（我们不知道代码中可能会出现什么）。

解决问题的最佳方法是通过传递ID参数在打字稿中创建一个函数。像这样的东西：

在您的package.json中包含JQuery依赖项

dependencies: [
    ...
    "jquery": "3.3.1"
    ...
]

在您的TS代码中使用Jquery

import $ from "jquery";

...

export class YourComponent  {
  ...

  toggleClick(id) {
    $("#lastReq" + id).toggle();
  }
}

在HTML代码中使用新功能：

<a (click)='toggleClick(item.id)'>last request</a>

Angular2：将* ngFor项目的字段作为参数放入函数调用

1 个答案: