在下面的例子中,我指定了一个局部变量#input
多个单选按钮。当点击<tr>
我想选择里面的单选按钮。
下面的代码工作正常,但我不明白为什么。
当所有输入都具有局部变量时,Angular2 如何“知道”我指的是哪个输入#input
?
HTML
<tr *ngFor="let office of employee.offices" (click)="selectOffice(input)">
<td class="select-office-radio">
<input type="radio" name="office" #input />
</td>
<td>
{{office.officeName}}
</td>
</tr>
JS
selectOffice(input) {
input.checked = true;
}
正如布山所说,ngFor
是一个结构指令,因此它是基于模板的结构的快捷方式。简而言之,可以在模板中将其脱糖为以下内容:
<template ngFor let-office [ngForOf]="employee.offices">
<tr (click)="selectOffice(input)">
(...)
</tr>
</template>
为模板定义局部变量的方法如下:
- 添加前缀
let-
。例如,let-office
将定义一个变量office
.
- 如果您没有定义值,则该值
$implicit
将使用模板上下文中的条目。对于 ngFor 来说,它是迭代中的当前元素。这里:let-office
.
- 您还可以指定一个值。例如,如果要为循环中的索引定义一个变量:
let-i="index"
。在这种情况下,变量i
将包含相应的值。
关于变量定义#
字首。如果它们应用的元素不是组件,则它们对应于 DOM 元素。如果是组件,就对应组件。例如,input
in <input #input/>
对应于一个ElementRef
并且可以通过其访问 DOM 元素nativeElement
财产。
您还可以为此类变量指定一个值。在这种情况下,您可以选择应用于元素的特定指令。例如<input #ctrl="ngModel" [(ngModel)]="val"/>
。该值对应于在exportAs
指令声明中的属性:
@Directive({
selector: 'child-dir',
exportAs: 'child'
})
class ChildDir {
}
@Component({
selector: 'main',
template: `<child-dir #c="child"></child-dir>`,
directives: [ChildDir]
})
class MainComponent {
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)