Question

我有一个选项 - 男性，女性和其他选项。如果我选择男性，我想要一张男性的照片。如果我选择一个女性，一个女性的照片将被展示等等。

HTML code：

 <label>Choose gender:</label>
    <select [(ngModel)]="gender" name="gender" id="gender">
    <option value="m">Male</option>
    <option value="f">Female</option>
    <option value="o">Other</option>
  </select>
    <img [src]="imageUrl" >

在TS文件中：

gender: string;
imageUrl: string;
constructor() {
  this.imageUrl = 'https://api.drupal.org/sites/default/files/default-avatar.png'; 
}

Answer 1

一个解决方案是订阅// INotifyPropertyChanged should be handled by `Fody.PropertyChanged` public class MyViewModel : INotifyPropertyChanged { public IList<string> MyData { get; set; } [AlsoNotifyFor(nameof(MyPickerShouldBeVisible))] public bool ShouldShowPicker => MyData.Any(); }事件并在事件处理函数中编写逻辑

<强>标记

(change)

<强>组件

<select [(ngModel)]="gender" name="gender" id="gender" (change)='onGenderChange()'>

Answer 2

试试这样：

<label>Choose gender:</label>
<select [(ngModel)]="gender" name="gender" id="gender" (ngModelChange)="genderChange($event)">
  <option value="m">Male</option>
  <option value="f">Female</option>
  <option value="o">Other</option>
</select>
<br/>
<img *ngIf="imageUrl" [src]="imageUrl" >

<强>打字稿

export class AppComponent  {
  gender: string;
  imageUrl: string;

  genderChange($e) {
    if(this.gender == 'm') {
      this.imageUrl = "https://api.drupal.org/sites/default/files/default-avatar-male.png";
    } else if(this.gender == 'f') {
      this.imageUrl = "https://api.drupal.org/sites/default/files/default-avatar-female.png";
    } else {
      this.imageUrl = "https://api.drupal.org/sites/default/files/default-avatar-other.png";
    }
  }
}

demo

Angular在选择选项

2 个答案: