Ссылочная переменная обрабатывается как неиспользуемая и неопределенная. Зачем?

Question

Я использую ссылки в своем HTML-коде для передачи значения ввода в функцию JavaScript. Однако, хотя одна ссылочная переменная (#options) работает нормально, другая (#current) помечается в одном месте как «неразрешенная / неопределенная» и в ее объявлении «не используется». Я не могу понять, в чем разница между ними и почему это происходит.

Я знаю, что это не проблема с дублированием ссылок, потому что current отлично работает, если он помещен в событие (click) в своем собственном элементе ввода; однако, это также не может быть проблемой области видимости, потому что входные ссылки 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). Эти переменные должны быть уникальными для всего шаблона. Документы Angular говорят следующее в сообщении, которое я связал:

Область действия ссылочной переменной - весь шаблон. Не определяйте одно и то же имя переменной более одного раза в одном и том же шаблоне. Значение времени выполнения будет непредсказуемым.

Answer 2

Я думаю, это потому, что у вас есть два элемента с тегом #current.

Вы можете достичь того же, используя один элемент с троичным:

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