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

Question

我想在调用某个函数时显示一个按钮（或将其追加到其父元素），但我不知道如何访问元件类中的元素。

private showBtn = false; 

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

撤销按钮必须在一开始被隐藏，点击测试按钮时，应显示：

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

组件类。我尝试使用*ngIf和@ViewChild()，但它不能用于多个不同ID的按钮。

Answer 1

你也可以在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 2

最简单的方法是在你的物品重复使用性能，是这样的：

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