如何讓一個元素的點擊切換Angular 4中另一個元素的可見性？

我是Angular的新手，我試圖讓用戶通過單擊項目行來顯示/隱藏一行細節。我有一個日誌條目表。對於每個日誌條目行，其下方都有一個隱藏行，其中包含詳細信息。當單擊日誌條目行時，應切換詳細信息行的可見性。如何讓一個元素的點擊切換Angular 4中另一個元素的可見性？

我最初在事件處理程序中通過爬行DOM和修改細節行的樣式完全解決了這個問題。這並沒有覺得很習慣到角，所以一些挖後，我現在有這樣的解決方案：

相關的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) 
    } 
}

正如你看到的我必須維護一組布爾值來跟蹤細節行的狀態。我覺得應該有可能（和慣用）在模板中完成這一點，我只是不知道該怎麼做。可能嗎？

來源

2017-04-04 Hubro

在通過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 = '' 
    } 
}

但至少比我以前的方法要乾淨得多。

注：我的切換功能是這樣寫的，因爲詳細信息行默認是隱藏的。

來源

2017-04-05 09:33:49 Hubro

如何讓一個元素的點擊切換Angular 4中另一個元素的可見性？

回答

相關問題