隐藏/显示角度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

您可以使用[hidden]或* ngIf。差异是* ngIf将从DOM树中删除元素，[隐藏]只是隐藏它但仍然在DOM树中。

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

要么

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

你也可以做长度检查。防爆。 *ngIf="variable_name.length > 0"或[hidden]="variable_name.length == 0"

Answer 2

只要查看您的输入值是否等于''：

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

更多信息：*ngIf