Question

我想设置在np.testing.assert_array_equal((R @ A.T).T, A @ R.T)事件中调用的不同方法。我在(click)-文件中创建了一个字典数组：

ts

headerElements = [ { descriptor: "Name", icon: "/assets/imgs/name-32.png", cursor: "default", event: "null" }, { descriptor: "Price", icon: "/assets/imgs/description-32.png", cursor: "pointer", event: "orderByPrice()" }, { descriptor: "Link", icon: "/assets/imgs/timer-32.png", cursor: "default", event: "null" }, { descriptor: "Datum", icon: "/assets/imgs/timer-32.png", cursor: "pointer", event: "null" } ];-方法如下：

orderByPrice

我在orderByPrice() { this.isSortedAsc = !this.isSortedAsc; const direction = this.isSortedAsc ? "desc" : "asc"; this.gearPieces = this.gearService.getGearComponentsOrderByPrice(direction); }-文件中这样称呼它：

html

不幸的是，设置要在<table class="table table-dark"> <thead> <tr> <th *ngFor="let header of headerElements"> <img src={{header.icon}} width="32" height="32" style="cursor: {{header.cursor}};" (click)="{{header.event}}"/>{{header.descriptor}} </th> </tr> </thead> </table>上调用的特定方法给我这个错误：

模板解析错误：解析器错误：得到了插值（{{}}）其中表达式应该在[{{header.event}}]
的第0列

是否有可能做到这一点？

Answer 1

更新

您可以将函数引用直接附加到对象中的事件prop，而不是函数名称。因此，如果您有方法：

orderByPrice() {
    console.log("order by price called");
}

附加参考，例如：

headerElements = [
  {
    descriptor: "Price",
    icon: "/assets/imgs/description-32.png",
    cursor: "pointer",
    event: this.orderByPrice //<---- assign the actual reference of the function
   },
   .
   .
]

旧答案（我不知道我在想什么）

您可以为类中的方法创建引用。像这样：

orderByPrice = () => {
    console.log("order by price called");
}

使用函数引用为头元素分配event而不是其名称

创建对象的方法如下：

headerElements = [
  {
    descriptor: "Name",
    icon: "/assets/imgs/name-32.png",
    cursor: "default",
    event: null
  },
  {
    descriptor: "Price",
    icon: "/assets/imgs/description-32.png",
    cursor: "pointer",
    event: this.orderByPrice //<---- assign the actual reference of the function
  },
  {
    descriptor: "Link",
    icon: "/assets/imgs/timer-32.png",
    cursor: "default",
    event: null // <-- as described in comments have it falsy, actual null
  },
  {
    descriptor: "Datum",
    icon: "/assets/imgs/timer-32.png",
    cursor: "pointer",
    event: null
  }
];

将您的HTML设置为：

  <th *ngFor="let header of headerElements">
    <img src={{header.icon}} width="32" height="32" style="cursor: {{header.cursor}};" (click)="header.event && header.event()"/>{{header.descriptor}}
  </th>

修改

（基于评论）

这部分包含检查和解释，如果在角度类中具有引用函数的变量是否正确。

当我们将变量添加为函数引用而不是在类中添加命名函数时，我检查了组件实例。

因此，当添加命名函数时，它会出现在组件实例的原型中。但是，如果我有一个对该函数的变量引用，则该变量（因此该函数）将直接出现在组件实例中（这意味着代码重复）。

为避免这种情况，我们可以将函数添加到类的原型中。

  AppComponent.prototype['orderByPrice'] = (): void => {
    console.log("order by price called");
  }

我找不到其他区别。我愿意提出建议，反驳问题，如果不正确，可以纠正我的错误。

谢谢！

Answer 2

一种简单的解决方案是（如果未从服务器中检索headerElements变量数据，而是在本地定义的）：

如下更改headerElements.event：

headerElements = [
{
  descriptor: "Name",
  icon: "/assets/imgs/name-32.png",
  cursor: "default",
  event: () => {return this.test1();}
},
{
  descriptor: "Price",
  icon: "/assets/imgs/description-32.png",
  cursor: "pointer",
  event: () => {return null;}
},
{
  descriptor: "Link",
  icon: "/assets/imgs/timer-32.png",
  cursor: "default",
  event: () => {return null;}
},
{
  descriptor: "Datum",
  icon: "/assets/imgs/timer-32.png",
  cursor: "pointer",
  event: () => {return this.test2('It works!');}
}
];

此外，如下修改HTML click事件：

(click)='value.event()'

Angular 7-使用* ngFor属性设置变量click事件

2 个答案: