Angular 4 - show/hide 中的元素 DOM 使用元素的 Id

Question

我想在调用函数时显示一个具有特定 Id 的按钮（或将其附加到其父元素），但我不知道如何访问组件中的元素 class.

<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>

分量class:

private showBtn = false;

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

撤消按钮必须在开头隐藏，当单击测试按钮时，它应该出现。我尝试使用 *ngIf 和 @ViewChild() 但它不能用于具有不同 ID 的多个按钮。

Answer 1

最简单的方法是对重复项使用属性，如下所示：

<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;
}

Answer 2

您可以在 showBtn 中保留所选按钮的 ID 属性。

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>

打字稿

showBtn=-1;

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

Answer 3

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

<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>

Angular 4 - show/hide 中的元素 DOM 使用元素的 Id

Angular 4 - show/hide element in DOM using Id of element

javascript

show-hide

typescript

angular2-template

angular