Я хочу показать кнопку (или добавить ее к родительскому элементу) с определенным 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(), но его нельзя использовать для нескольких кнопок с разными идентификаторами.

4
Elliott08 31 Авг 2017 в 11:20

3 ответа

Лучший ответ

Вы можете сохранить идентификатор выбранной кнопки в свойстве 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>

Машинопись

showBtn=-1;

showUndoBtn(index){
  this.showBtn=index;
}
6
Vega 31 Авг 2017 в 08:34

Самый простой способ - использовать свойства ваших повторяющихся элементов, например:

<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;
}
2
devqon 31 Авг 2017 в 08:25

Самый простой способ, когда вам не нужно вызывать отдельную функцию для реализации

<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>
2
Rohan Fating 31 Авг 2017 в 11:27