Передача ссылки на шаблон из другого элемента дает неопределенный с ngIf

Question

Я пытаюсь проверить пару значений для каждого нажатия клавиши, определяя ссылки на шаблоны для каждого из входных данных и передавая их в функцию проверки. Однако по какой-то причине ссылка, которая не из входящего вызова всегда возвращает 'undefined'.

Это выглядит примерно так:

Шаблон:

<input type="text" *ngIf="oneCondition" placeholder="Key" (keyup)="validateInput(keyElement, valueElement)" #keyElement />
<input type="text" *ngIf="oneCondition" placeholder="Value" #valueElement />

Скрипт :

public validateInput(key, value): boolean {
        console.log('row', key, value);
}

Результат:

строка Undefined

То же самое произойдет, если я добавлю (keyup) ко второму элементу, и в этом случае первый получится неопределенным. Я пытался создать ViewChildren для этих элементов на всякий случай, но он также не работал (и, вероятно, не имеет отношения).

Однако без условия (ngIf), похоже, работает. Почему это так и можно ли устранить эту проблему?

Answer 1

Причина в том, что #valueElement и #keyElement недоступны вне элементов, к которым применяется *ngIf. Чтобы преодолеть эту ситуацию, вам нужно окружить свои входные данные <ng-template> и применить ваш *ngIf к шаблону. Затем внутри шаблона используйте элементы ввода.

<ng-template [ngIf]="oneCondition">
  <input type="text" placeholder="Key" (keyup)="validateInput(keyElement, valueElement)" #keyElement />
  <input type="text" placeholder="Value" #valueElement />
</ng-template>

Answer 2

Теперь, когда проблема прояснилась, я думаю, что могу предложить предположение, которое мне кажется достаточным для решения этой проблемы.

Как вы уже знаете после добавления ngIf и условия ложно, элемент ссылка на шаблон не будет доступна, что вполне ожидаемо. Потому что ngIf полностью удаляет весь элемент.

Вместо поиска обходного пути, чтобы сделать ссылку на элемент доступной, когда ngIf ложно. Я бы посоветовал еще раз подумать, зачем нужна ссылка, когда элемент удален из пользовательского интерфейса? Потому что, похоже, логически это не имеет смысла.

Лучшим подходом было бы проверить доступность ссылки и, соответственно, ввести свой логический код c.

public validateInput(key, value): boolean {
  if (!value) {
    console.log('value input is not available, condition false, do something else');
  } else {
    console.log('value input is available, process input fields', key, value);
  }
}