如何在Angular 2中的html方法调用中获取当前元素

Question

我正在使用Angular 2中的primefaces数据表组件。 我正在尝试创建一个通用的可见列选择器。 p-column元素有一个“隐藏”属性，我想用一个方法来设置该列是否是我的可见列数组。

类似的东西：

MyCustomList.html

<p-dataTable [value]="items">
    <p-column [hidden]="isHidden(this)" header="Name" field="name"></p-column>
    ... other columns ...
</p-dataTable>

MyCustomList.ts

isHidden(column) {
    //simple test for example
    if (column.field === 'name') {
      return true;
    }
    return false;
}

关键是列不是元素“p-column”本身，而是“MyCustomList”组件本身，所以不可能知道我在哪一列。当然，这里没有 $ event 。

由于我想要通用的东西，我想避免定义一个#tag传递给我的方法。我可以在这里使用 this 或 $ event 这样的特定关键字吗？

谢谢你的冬天！

Answer 1

您可以设置相同的变量名称，然后使用ViewChildren选择列。

如此简单：

@ViewChildren('column') columns: QueryList<any>;

然后找到您的专栏：

this.columns.filter((column) => {


  if (column.field === 'name') {

    // This is the column you want to use.
  }
})[0];