Question

我有一个通过单击按钮显示/隐藏元素的组件。

这是我的HTML

  <div *ngFor="let history of histories | sortdate: '-dateModified'">
    <p><b>{{ history.remarks }}</b> - <i>{{history.dateModified | date:'short'}}</i></p>
    <a href="google.com" 
    [class.datatable-icon-right]="history.$$expanded" 
    [class.datatable-icon-down]="!history.$$expanded" 
    title="Expand/Collapse Row" 
    (click)="toggleExpandRow(history)"></a>
      <!-- hide/show this by clicking the button above.-->
    <div *ngFor="let step of history.steps; let i = index">
      <b>{{i+1}}.</b> {{step}}
      <span class="clear"></span>
    </div>
    <hr />
  </div>

和我的.ts

  toggleExpandRow(row) {
    console.log('Toggled Expand Row!', row);
    //row
    return false;
  }

尝试搜索但是，找不到任何相同的样本。

关于jquery，我可以这样做，但是在Angular2上，我很难想到这个。

Answer 1

有两种选择：

1-您可以使用隐藏指令来显示或隐藏任何元素

<div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
  <strong>List Saved!</strong> Your changes has been saved.
</div>

2-您可以使用ngIf控制指令添加或删除元素。这与hidden指令不同，因为它不显示/隐藏元素，但是它从DOM中添加/删除。您可以丢失元素的未保存数据。对于被取消的编辑组件，它可能是更好的选择。

<div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
  <strong>List Saved!</strong> Your changes has been saved.
</div>

Answer 2

在重复的行中使用ngIf。创建一个名为showStep的布尔属性，以指示是否应该扩展该行。

<div *ngFor="let step of history.steps; let i = index" ngIf="history.showStep">
  <b>{{i+1}}.</b> {{step}}
  <span class="clear"></span>
</div>

然后，在.ts文件中：

  toggleExpandRow(history) {
     history.showStep = !history.showStep
     //note the same porperty of showStep that is used in your html
  }

附加：

事实上，要保存几行代码，您甚至根本不需要toggleExpandRow功能。你可以在你的html中内联：

//other attributes omitted for brevity
<a (click)="history.showStep = !history.showStep">

如何在Angular2中显示/隐藏

2 个答案:

附加：