使用 Angular 中的下拉菜单显示/隐藏 div 元素？

Question

我是 Angular 的新手。 我想使用下拉（选择）菜单显示/隐藏文件 div。如果我选择“自定义”，它将显示文件元素。 但我选择“无”，它会隐藏和删除文件（如果有）元素。 我无法显示隐藏文件元素。 请提供一些反馈？

<div class="form-group">
  <label for="credentials">Credentials</label><br />
  <select name="select_file" class="form-control" required ng-model="myVar">
    <option value="">Choose a option</option>
    <option value="false">none</option>
    <option value="true">custom</option>
  </select>
  <div *ngIf="myVar">
    <input
      type="file"
      class="form-control"
      id="credentials"
      accept=".json"
      [(ngModel)]="userdata.credentials"
      (change)="handleFileInput($event.target.files)"
      name="credentials"
    />
  </div>
</div>

Answer 1

首先它不是 Angular JS，它看起来像 Angular 2+。 关于你的问题：

[value]="..." only supports string values
[ngValue]="..." supports any type, including boolean

例如

<h1>My Application</h1>
<select [(ngModel)]="myVar">
  <option [ngValue]="''">Choose a option</option>
  <option [ngValue]="false">none</option>
  <option [ngValue]="true">custom</option>
</select>

也尝试使用反应式 Forms而不是 ngModel

Answer 2

    <div class="form-group">
  <label for="credentials">Credentials</label><br/>
  <select name="select_file" class="form-control" required [(ngModel)]="myVar">
    <option value="">Choose a option</option>
    <option value="false">none</option>
    <option value="true">custom</option>
</select>
<div *ngIf="myVar === true">
    <input 
    type="file" 
    class="form-control" 
    id="credentials" 
    accept=".json"
    [(ngModel)]="userdata.credentials"
    (change)="handleFileInput($event.target.files)"
    name="credentials" 
    >
  </div>

您需要使用ngModel 。 在 Ts 文件中，只需定义myVar变量。请尝试此代码。