html - 控制*ngFor最后一项的具体样式

Question

我需要使迭代器生成的最后一行控件既禁用又有些不可见。我正在使用以下有效代码。

<div *ngFor="let item of data; let last = last;">

  <input class="form-control"
        [value]="item.e"
        [disabled]="last">

  <button (click)="onRemove(item)"
          class="btn btn-outline-danger"
          [style.visibility]="last?'hidden':''">Do</button>

</div>

我想提高代码质量，但我对可见性管理特别不满意。当我们考虑设置残疾时，它非常简洁。但可见性的条件似乎很笨拙。

应该如何像老板一样控制可见性？

我测试了以下内容，但没有成功。

<button (click)="onRemove(item)"
        class="btn btn-outline-danger"
        [style.visibility.hidden]="last">Do</button>

Answer 1

我会为不可见元素创建一个类(如果大量使用，可能是全局的)

.invisible {
  visibility: hidden;
}

然后根据last值应用该类

<button (click)="onRemove(item)" 
        class="btn btn-outline-danger"
        [class.invisible]="last">
</button>

this stackblitz 中的示例