你如何在Angular上的ng-template中切换显示/隐藏?

时间:2018-02-08 17:13:53

标签: angular typescript

这就是我尝试过的,当然它让所有项目都可见:

<ng-template let-file let-i="index" pTemplate="file">
  <div class="ui-fileupload-row">
    <div><img [src]="file.objectURL" width="50"/></div>
    <div>{{file.name}}</div>
    <div>{{formatSize(file.size)}}</div>
    <div><button (click)="toggleIsFormVisible()">Add metadata <i class="fa fa-plus"></i></button></div>
  </div>
  <div *ngIf="isFormVisible"></div>
</ng-template>

toggleIsFormVisible()
{
    this.isFormVisible = !this.isFormVisible;
}

如何只知道索引,而不重复项目?

2 个答案:

答案 0 :(得分:1)

似乎解决方案并不那么复杂,受到msanford的启发。

<ng-template let-file let-i="index" pTemplate="file">
  <div class="ui-fileupload-row">
    <div><img [src]="file.objectURL" width="50"/></div>
    <div>{{file.name}}</div>
    <div>{{formatSize(file.size)}}</div>
    <div><button (click)="file.isFormVisible = !file.isFormVisible">Add metadata <i class="fa fa-plus"></i></button></div>
  </div>
  <div *ngIf="file.isFormVisible"></div>
</ng-template>

答案 1 :(得分:0)

  1. this.isFormVisible
  2. ngIf="IsFormVisible"
  3. 问题在于大写i字母。