Angular2 show element on change of selection

问题

Using Angular 2 typescript. I only want to show my save button if a new option was selected. Then I want to hide the Save button after it was clicked. How can I do that? Not really sure how to approach this. Code below:

HTML

<select>
   <option *ngFor="let option of optionArray" [value]="option">{{option}}</option>
</select>

<span class="input-group-btn">
   <button class="btn btn-primary save-button" type="submit">Save</button>
</span>

回答1:

You can put ngModel on select field & based on select value you can show/hide submit button.

<select [(ngModel)]="selectedValue">
   <option *ngFor="let option of optionArray" [value]="option">{{option}}</option>
</select>

<span class="input-group-btn" *ngIf="selectedValue">
   <button class="btn btn-primary save-button" type="submit">Save</button>
</span>

Note: You have to import and include FormsModule inside your AppModule NgModule.

回答2:

You can use *ngIf in this scenario,

<select [(ngModel)]="selected">
   <option *ngFor="let option of optionArray" [value]="option">{{option}}</option>
</select>
<span *ngIf="selected" class="input-group-btn">
       <button class="btn btn-primary save-button" type="submit">Save</button>
</span>

来源：https://stackoverflow.com/questions/48468570/angular2-show-element-on-change-of-selection