Скрыть / Показать Угловой 5

Question

Я хочу простой тег прятки <p></p> с текстом в нем.

Сначала я сделал это с помощью простой директивы *ngIf, которая скрывает мой тег, если мой входной тег пуст. Но я хочу, чтобы тег <p> скрывался сам, если я очищаю свой тег ввода и показываю, есть ли что-то, и снова скрываю, если ввод пуст.

Так вот мой код:

<h2>Bonjour Monsieur {{username}}<span (test)="test()" *ngIf="age != null">, vous avez {{age}} ans</span></h2><br/>
<table>
  <tr>
    <td><input [ngModel]="username.toUpperCase()"
               (ngModelChange)="username=$event" name="inputField" type="text" /></td>
    <td><input [(ngModel)]="age"/></td>
    <td>Espagne</td>
  </tr>
</table>

export class AppComponent {
  username: string = "";
  age:number;
}

Answer 1

Вы можете использовать [скрытый] или * ngIf оба. Разница в том, что * ngIf удалит элемент из дерева DOM , а [hidden] просто скрывает его , но все еще в дереве DOM.

<input type="text" [(ngModel)]="variable_name" />
<p [hidden]="variable_name == '' ">{{ variable_name}} </p>

или

<p *ngIf="variable_name != '' ">{{ variable_name}} </p>

Вы также можете проверить длину. Ex. *ngIf="variable_name.length > 0" или [hidden]="variable_name.length == 0"

Answer 2

Просто посмотрите, равно ли ваше входное значение '':

<input [(ngModel)]="username" />
<p *ngIf="username != '' ">{{ username}} </p>

Подробнее: * нгф