Блог

Главная - Вопросы по программированию - Почему мой «<div * ngIf" удаляет мои элементы из моего

Почему мой «<div * ngIf" удаляет мои элементы из моего

#angular

Вопрос:

В настоящее время у меня есть проблема, которой у меня никогда не было.

С помощью этого кода ниже мои тексты отображаются правильно.

введите описание изображения здесь

 <li data-help="4">
<span class="numberIconPage2" style="position: absolute; top: -238px">4</span>
    <p class="titrePage2" style="position: absolute; top: -238px;">
        {{'1609-1611' | t }}
   </p>
   <p class="step1 help-1" >
      <input type="text" class="inputSignInAccess" [(ngModel)]="otp">
                  
   </p>
</li>

Когда я добавляю это условие

 <div *ngIf="otp.length > 2 ">
    Max 2 characters long.
</div>

Мои сообщения исчезли.

введите описание изображения здесь

Однако, если я введу цифру во входные данные, элементы будут отображаться правильно.

введите описание изображения здесь

Я хотел бы, чтобы текст отображался, даже если пользователь не вводит никакого значения.

Я не понимаю, почему это условие сбивает с толку мой HTML-код?

 <li data-help="4">
 <span class="numberIconPage2" style="position: absolute; top: -238px">4</span>
    <p class="titlePage2" style="position: absolute; top: -238px;">
         {{'1609-1611' | t }}
    </p>
     
    <input type="text" class="inputSignInAccess" [(ngModel)]="otp">
       <div *ngIf="otp.length > 2 ">
          Max 2 characters long.
       </div> 
       
</li>

Большое вам спасибо за ваш ответ.

Комментарии:

1. не могли бы вы поделиться своим кодом на определенном ngFor уровне, пожалуйста?

2. Проверьте консоль инструментов разработчика на наличие ошибок

3. пожалуйста, создайте работающую версию вашей проблемы в stackblitz или где-нибудь еще, чтобы мы могли увидеть проблему и решить ее

Ответ №1:

Я предполагаю otp , что значение не определено (или, возможно, равно нулю), вы получаете «Не удается прочитать длину свойства неопределенного» в консоли, и эта ошибка портит визуализацию шаблона. Исправление было бы *ngIf="otp?.length > 2" или инициализацией otp пустой строки.

Был ли я прав?

Комментарии:

1. Большое вам спасибо, это прекрасно работает! Как вы инициализируете переменную opt в HTML ?? Я не понимаю?

2. @elodie не в HTML, а в TS. Я предполагаю opt , что там объявлено opt: string или что-то подобное. Просто сделай это opt: string = '' , или просто opt = '' .

Метки: