Angular 4 - 使用元素的ID在DOM中显示/隐藏元素

Question

当调用一个函数时，我希望显示一个具有特定id的按钮（或将其附加到其父元素），但我不知道如何在组件类中访问该元素。

<div *ngFor="let item of items; let i = index;">

    <button [attr.id]="'undoBtn'+i" *ngIf="showBtn" class="editBtn" md-raised-button color="primary"> 
        <md-icon>undo</md-icon>Undo
    </button>

    <button (click)=showUndoBtn(i) md-raised-button color="primary">Test</button>
</div>

组件类：

private showBtn = false;

showUndoBtn(btnId: number) {
    // show btn with id btnId in DOM
}

撤销按钮必须在一开始时隐藏，当点击“测试”按钮时，它应该出现。我尝试使用 *ngIf 和 @ViewChild()，但无法用于具有不同ID的多个按钮。

- Elliott08

Answer 1

你可以将所选按钮的id保存在showBtn属性中。 HTML

<div *ngFor="let item of items; let i = index;">

        <button [attr.id]="'undoBtn'+i" *ngIf="showBtn===i" class="editBtn" md-raised-button color="primary"> 
            <md-icon>undo</md-icon>Undo
        </button>

        <button (click)=showUndoBtn(i) md-raised-button color="primary">Test</button>
 </div>

Typescript

showBtn=-1;

showUndoBtn(index){
  this.showBtn=index;
}

- Vega

---

我需要一个解决方案，当我点击相同的 div 时，它将关闭已打开的 div。有什么解决办法吗？ - shiva

是的，但如果我点击div外面的任何部分，也会关闭打开的div。 - shiva

Answer 2

最简单的方法是不需要调用单独的函数来实现

<div *ngFor="let item of items; let i = index;">

        <button [attr.id]="'undoBtn'+i" *ngIf="showBtn===i" class="editBtn" md-raised-button color="primary"> 
            <md-icon>undo</md-icon>Undo
        </button>

        <button (click)='showBtn=i' md-raised-button color="primary">Test</button>
 </div>

- Rohan Fating

Answer 3

最简单的方法是在重复的项上使用属性，例如：

<div *ngFor="let item of items; let i = index;">

    <button [attr.id]="'undoBtn'+i" *ngIf="item.showButton" class="editBtn" md-raised-button color="primary"> 
        <md-icon>undo</md-icon>Undo
    </button>

    <button (click)=showUndoBtn(item) md-raised-button color="primary">Test</button>
</div>

你的组件：

showUndoBtn(item) {
    // show btn with id btnId in DOM
    item.showButton = true;
}

- devqon