通过单击显示子组件中任何行的详细信息，通过单击同一行关闭详细信息在 Angular 上执行 2+

Question

我需要一些帮助来切换子组件中 table 行的值。

它应该只有在我点击一行时才会显示。这很好。但是如果我在下一行中单击它会关闭详细信息，但它应该只切换值。如果我在同一行中单击两次，它应该会关闭详细信息。

Workaround here

Answer 1

您必须像这样更改您的 toggleDetails 函数

toggleDetails(row) {
    console.log(row);
    if (this.rowData == row) {
      this.showDetails = !this.showDetails;
    } else {
      this.showDetails = true;
    }

    this.rowData = row;
  }

这行得通！

Answer 2

试试这个：

toggleDetails(row) {
    console.log(row);
    this.showDetails = row.position !== this.rowData.position || !this.showDetails;
    this.rowData = row;
  }

Answer 3

请查看工作演示 here。我修改了toggleDetails方法。