Question

我有一个按钮属性列表，我希望按钮具有不同的模板引用变量，但我使用* ngFor渲染它们。如何将引用变量设置为＃button1，＃button2等。我需要将模板引用变量设置为该按钮的ToolTipDirective。

为什么我需要这样做： Firefox中无法访问按钮的工具提示（使用TAB时工具提示不显示）。因此，要使工具提示显示，我需要按钮为：<button #button1=bs-tooltip (focus)="button1.toggle()" (blur)="button1.toggle()" [tooltip]=button.tooltip" >{{button.text}}</button>。使用相同的模板引用变量会产生一个问题，当焦点位于另一个按钮上时，会显示按钮的工具提示（显示两个工具提示，但只显示1个）。

代码：

<li *ngFor="let button of buttons">
   <button #button1=bs-tooltip (focus)="onFocus(button1) [tooltip]=button.tooltip" >{{button.text}}</button> --> how can I set #button1?
</li>

Answer 1

你可以绑定id属性然后使用document来获取html元素

这是一个例子

<强> app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  onClick(foo) {
    console.log(foo)
  }

  getElementById(id) {
    return document.getElementById(id);
  }
}

<强> app.component.html

<button (click)="onClick(getElementById('foo'))">click </button>

<input [id]="'foo'">

如何为* ngFor angular中的项创建不同的模板引用变量

1 个答案: