Question

我在HTML代码中使用引用将输入的值传递给JavaScript函数。但是，尽管一个引用变量（#options）可以正常工作，但另一个引用变量（#current）在一个位置被标记为“未解析/未定义”，在其声明中被标记为“未使用”。我不知道它们之间有什么区别以及为什么会这样。

我知道引用重复不是问题，因为current如果放在自己的输入元素的（单击）事件中，则可以很好地工作；但是，这也不是范围问题，因为输入引用options很好。那么，为什么图标功能不能返回current呢？

<ng-container matColumnDef="maxInstalls">
        <th mat-header-cell *matHeaderCellDef>Max Installs</th>
        <td mat-cell *matCellDef="let profile">
          <input #current (click)="showDiv(options)" class="hiddenInput" type="number" min="0"
                 *ngIf="(profile.maximumInstalls > 0)" value="{{profile.maximumInstalls}}">
          <input #current (click)="showDiv(options)" class="hiddenInput" type="number" min="0"
                 *ngIf="(profile.maximumInstalls == 0)" value="">
          <div #options hidden="true">
            <mat-icon (click)="changeMaxInstalls(current, profile, options)">done</mat-icon>
            <mat-icon (click)="hideDiv(options)">clear</mat-icon>
          </div>
        </td>
      </ng-container>

我希望changeMaxInstalls()将current变量传递给函数；但是，会引发错误，指出current未定义。另外，在我的IDE中，#current引用的声明被标记为“未使用的局部变量”。 showDiv()和hideDiv()引用了options。

Answer 1

您对两个元素（#current)使用相同的Template Reference Variable。这些变量在整个模板中都是唯一的。Angular文档在我链接的帖子中说了以下内容：

参考变量的范围是整个模板。请勿在同一模板中多次定义相同的变量名。运行时值将不可预测。

Answer 2

我认为是因为您有两个带有#current标签的元素。

您可以通过使用带有三元元素的单个元素来实现相同目的：

<input #current (click)="showDiv(options)" class="hiddenInput" type="number" min="0"  value="{{(profile.maximumInstalls > 0) ? profile.maximumInstalls: ''}}">

参考变量被视为未使用和未定义。为什么？

2 个答案: