Plunker中的解决方案：https://plnkr.co/edit/Sz92H4?p=preview

Question

我的 angular2项目 中有一个vaadin-grid，其中包含不同的列，例如（列标题：名字，姓氏，年龄，城市，国家/地区）。我正在尝试隐藏和显示lastname列的功能。每当我点击firsname的列标题时，只有lastname列必须隐藏/显示在vaadin-grid中。

任何人都可以帮助我完成任务。

谢谢。

app.html

      <h2>hello</h2>
            <vaadin-grid>
            <table>
                <colgroup>
                    <col name="Name" click="res()">
                    <col name="Value">
                    <col name="Progress" hidable>
                </colgroup>

                <tbody>
                    <tr>
                        <td>Project A</td>
                        <td>10000</td>
                        <td>0.8</td>
                    </tr>
                    <tr>
                        <td>Project B</td>
                        <td>999999</td>
                        <td>0.8</td>
                    </tr>
                </tbody>
            </table>
        </vaadin-grid>

app.component.ts

    import { Component } from '@angular/core';
import { PolymerElement } from '@vaadin/angular2-polymer';


@Component({
  selector: 'my-app',
  templateUrl: 'app/app.html',

    styles: [`
                vaadin-grid {
                    height: 100%;
                }
          `],
    directives: [
        PolymerElement('vaadin-grid')
    ]
})
export class AppComponent {
    res(){
        console.log("hi tis is method");

    }
 }

Answer 1

<vaadin-grid>元素的这种用例会造成糟糕的用户体验。默认情况下，网格的标题不能设计为可点击。因此，它们看起来不活跃，因此用户不会将它们视为可点击的链接或按钮。

对于Vaadin网格，请考虑通过指定<col hidable>属性使列可隐藏。这将使用户能够通过在网格标题右侧的一个漂亮的下拉菜单中选择那些列来切换显示的列。有关示例，请参阅网格文档中的Hiding Columns部分。

如果您想通过单击在不同内容之间切换，最好使用专门为其设计的元素，例如<paper-tabs>。

Plunker中的解决方案：https://plnkr.co/edit/Sz92H4?p=preview

您的用例很难实现，因为Vaadin Grid API中也没有设计这些要求。我必须应用一些不愉快的解决方法才能实现它。请使用解决方案进行学习，而不是盲目地复制代码。警告解释如下。

如何绑定网格标题点击事件

首先，在Vaadin Grid中，DOM内容不是动态的。它们被视为初始配置，它们不直接用作网格内容。因此，您无法在模板中绑定标题单击。

在我的解决方案中，我们在网格上附加了事件监听器。在点击网格后，我们需要手动确定是否单击了标题并找到单击的列索引。为了做到这一点，我们：

获取活动目标参考。点击发生在网格的本地DOM中的某处。如果Polymer使用Shadow DOM（默认情况下禁用），event.target将返回网格而不是实际的事件目标。无论聚合物设置如何，都使用Polymer API确保具有正确的目标：
```
var target: Element = (<any> window).Polymer.dom(event).rootTarget;
```
检查点击目标和DOM树中的所有元素，直到结束（如果Polymer处于Shadow DOM模式）或网格本身（如果Polymer使用Shady DOM，这是默认模式）来查找列标题单元格元素。对于此检查，我们使用Polymer API检查元素类名称。我们在ngAfterViewInit()方法中为第一个名称列标题设置了自定义类名。
- 如果找到标题单元格元素，请停止搜索并调用this.toggleLastNameVisible();。
- 如果找不到标题单元格元素，则它不是单击的第一个名称网格标题。什么都不做。

请注意，我们希望对点击做出反应，但我们必须在网格上侦听“mouseup”事件而不是click事件。原因是有时网格在标题点击后重新呈现其内容，这会破坏标题单元格元素的查找。 Mouseup在这里工作，因为它在网格进程点击之前被触发。

如何以编程方式显示和隐藏列

现在我们解决了标题点击绑定问题，我们必须显示所选列并隐藏其他列。再一次，我们不能仅仅绑定模板中的<col [hidden]="showOrHide">属性，也不能使用*ngIf删除隐藏的列。因为网格DOM内容不是动态的。

我们必须获取grid元素引用并使用grid API：

@ViewChild('grid') gridRef: any;

toggleLastNameVisible(visible?: boolean) {
  this._isLastNameVisible = visible !== undefined ? visible : !this._isLastNameVisible;
  var grid: any = this.gridRef.nativeElement;
  // Assuming that the last name is the second column
  grid.set('columns.1.hidden', !this._isLastNameVisible);
}

请注意，ref已添加到模板中：<vaadin-grid #grid ...>

通过阅读Vaadin Grid Documentation和API Reference，您可以了解有关网格API的更多信息。希望有助于更好地了解网格的工作原理。

Answer 2

您可以在* ngIf。

的基础上执行此操作

默认情况下，在姓氏上使用* ngIf条件，布尔变量为false，每次点击第一个名称时都将其设为true。

我希望它适用于你：）

Vaadin-grid使用angular2通过单击方法显示/隐藏列

2 个答案:

Plunker中的解决方案：https://plnkr.co/edit/Sz92H4?p=preview

如何绑定网格标题点击事件

如何以编程方式显示和隐藏列