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

标签 angular

<分区>

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

为什么我需要这样做:按钮的工具提示在 Firefox 中不可访问(使用 TAB 时不显示工具提示)。所以,要显示工具提示,我需要按钮为:<button #button1=bs-tooltip (focus)="button1.toggle()" (blur)="button1.toggle()" [tooltip]=button.tooltip" >{{button.text}}</button> .使用相同的模板引用变量会产生一个问题,即当焦点位于另一个按钮上时会显示一个按钮的工具提示(两个工具提示都会显示,但应该只显示一个)。

代码:

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

最佳答案

你可以绑定(bind)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'">

关于angular - 如何为 *ngFor angular 中的项目创建不同的模板引用变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48264302/

相关文章:

angular - 使用最新的 CLI 构建库时以旧版​​本的 Angular 为目标?

javascript - ESlint Angular - no-unused-vars 命中类型定义

angular - 从docker ui容器调用到api容器

Angular 2 : How to import rx-dom

javascript - 如何将脚本包含在 angular.json 中

Angular 控制台日志仅来自 main.js :1 and polyfills. js:1

javascript - 使用 typescript@2.0.3 从 "typings"迁移到 "@types"

unit-testing - Angular2 单元测试 switchMap

angular - Observable 中的更改未反射(reflect)在 View 中

css - Angular:如何使用查询参数过滤数据表