无涯教程网

Typescript 如何在 *ngFor 中设置唯一的模板引用变量 (Angular)

发布于01月20日

我在一个*ngFor循环中有一堆输入字段.文档中说模板引用变量应该是唯一的.有没有办法让#attendee-{{person.id}}这样的东西变得独一无二？

   <div *ngFor="let person of attendeesList">
       <input #attendee [ngModel]="person.name" (blur)="changeName(attendee.value)"/>
   </div>

(我知道可以 Select 使用(ngModelChange)="changeName($event)"，但有理由我需要使用blur.具体来说，我don't希望模型更改，直到此人输入完姓名，并且我们验证了姓名不是空的，也不是重复的姓名.

推荐答案

模板引用变量已经是唯一的，因为您在嵌入式视图范围内使用它:

<div *ngFor="let person of attendeesList">
  <input #attendee [ngModel]="person.name" (blur)="person.name = attendee.value"/>
</div>

100

但您甚至可以省略模板引用变量，如下所示:

<div *ngFor="let person of attendeesList">
  <input [ngModel]="person.name" (blur)="person.name = $event.target.value"/>
</div>

Typescript相关问答推荐

用泛型类型覆盖父类函数导致类型y中的Property x不能赋给基类型Parent中的相同属性."'''''' "

泛型类型联合将参数转换为Never

TypeScrip原始字符串没有方法

如何使用类型谓词将类型限制为不可赋值的类型？

如何在深度嵌套的Reaction路由对象中隐藏父级？

扩展参数必须具有元组类型或传递给REST参数

具有自引用属性的接口

打字错误推断

界面中数组中的混合类型导致打字错误

S，为什么我的T扩展未定义的条件在属性的上下文中不起作用？

当数组类型被扩展并提供标准数组时，TypeScrip不会抱怨

创建一个TypeScrip对象并基于来自输入对象的约束定义其类型

Angular NG8001错误.组件只能在一个页面上工作，而不是在她的页面上工作

从以下内容之一提取属性类型

使用NextJS中间件重定向，特定页面除外

Typescript 是否可以区分泛型参数 void？

Select 器数组到映射器的Typescript 泛型

如何确定剧作家中给定定位器的值？

React HashRouter，单击导航栏时页面重新加载出现问题

为什么 typescript 在对象合并期间无法判断无效键？

实用课程推荐

相关教程推荐