gpt4 book ai didi

Angular2 局部模板变量

转载 作者:行者123 更新时间:2023-12-04 01:53:21 26 4
gpt4 key购买 nike

在下面的例子中,我指定了一个局部变量 #input到多个单选按钮。当点击 <tr>我想选择里面的单选按钮。

下面的代码工作正常,但我不明白为什么。

当所有输入都有局部变量 #input 时,Angular2 如何“知道”我指的是哪个输入? ?

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

最佳答案

正如 Bhushan 所说,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<input #input/>对应一个 ElementRef并且可以通过其 nativeElement 访问 DOM 元素属性(property)。

您还可以为此类变量指定一个值。在这种情况下,您可以选择应用于元素的特定指令。例如<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 {
}

关于Angular2 局部模板变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38264694/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com