如何在Angular 4中单击一个元素来切换另一个元素的可见性？

Question

我是Angular的新手，我试图通过单击项目行来让用户显示/隐藏行的详细信息。 我有一张日志条目表。 对于每个日志条目行，其下都有一个隐藏行，其中包含详细信息。 单击日志条目行时，应切换详细信息行的可见性。

我最初在事件处理程序中通过爬网DOM并修改明细行的样式来完全解决了这一问题。 对于Angular来说，这不是很习惯，所以经过一番挖掘，我现在有了以下解决方案：

相关的HTML：

<tbody>
    <ng-container *ngFor="let entry of log; let i=index">
        <tr class="log-entry" (click)="displayRow[i] = !displayRow[i]">
            <td class="datetime">{{entry.datetime}}</td>
            <td class="actor">{{entry.actor}}</td>
            <td class="summary">{{entry.summary}}</td>
        </tr>
        <tr class="details" [style.display]="displayRow[i] ? 'table-row' : ''">
            <td colspan="3">
                <pre>{{entry.details}}</pre>
            </td>
        </tr>
    </ng-container>
</tbody>

和代码：

import { Component, OnInit } from '@angular/core';
import { LogEntry } from '../log';
import { LogService } from '../log.service';

@Component({
  selector: 'app-log',
  templateUrl: './log.component.html',
  styleUrls: ['./log.component.styl']
})
export class LogComponent implements OnInit {
  log: LogEntry[]

  // Used by the template to keep track of which rows have details toggled
  displayRow: boolean[] = []

  constructor(private logService: LogService) { }

  ngOnInit() {
    this.logService
      .getLog()
      .then(this.onLogUpdated)
      .catch(this.onLogUpdateError)
  }

  // Event handlers

  private onLogUpdated = (log: LogEntry[]) => {
    console.debug("Redrawing log")

    this.displayRow = log.map((x) => false)
    this.log = log

    console.log(this.displayRow)
    console.log(this.log)
  }

  private onLogUpdateError = (error) => {
    console.error("Error when trying to get log from log service")
    console.error(error)
  }
}

如您所见，我必须维护一个布尔数组来跟踪明细行的状态。 我觉得仅在模板中应该有可能（惯用的）完成此操作，我只是不知道该怎么做。 可能吗？

Answer 1

在进一步阅读《 Angular 4》指南之后，我发现了一种似乎更好的方法。 它涉及到使用template reference variable标记详细信息行，然后调用函数以使用该变量隐藏行：

<ng-container *ngFor="let entry of logToday; let i=index">
<tr class="log-entry" (click)="toggleRow(details)">
    <td class="datetime">{{entry.datetime}}</td>
    <td class="actor">{{entry.actor}}</td>
    <td class="summary">{{entry.summary}}</td>
</tr>
<tr #details class="details">
    <td colspan="3">
        <pre>{{entry.details}}</pre>
    </td>
</tr>
</ng-container>

它仍然需要在组件代码中定义一个函数：

// Toggles the visibility of a table row
toggleRow(row) {
  if (row.style.display == '') {
    row.style.display = 'table-row'
  }
  else {
    row.style.display = ''
  }
}

但是至少它比我以前的方法干净得多。

注意：我的切换功能是这样编写的，因为默认情况下，明细行是隐藏的。