Question

在以下示例中，我为多个单选按钮指定了一个局部变量#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;
}

Answer 1

正如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元素。

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

Answer 2

* ngFor是一个结构指令，即它修改了DOM。

因此，对于每个记录，它创建它创建单独的input element。

此外，您将#input声明为input element的局部变量，因此#input分别引用每个输入元素。

如果要访问在文本输入中输入的值，你可以这样做：

selectOffice(input.value)

因为#input引用了html输入元素。

有关详细信息，请参阅：

Displaying Data using structural directives

Angular2本地模板变量

2 个答案: