javascript - Angular 选择选项时更改 src 属性

Question

我有一个选择 - 男性、女性和其他。如果我选择男性，我希望显示一张男性的照片。如果我选择女性，则会显示女性的照片等。

HTML 代码:

 <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

对此的一种解决方案是订阅 (change) 事件并在事件处理函数中编写您的逻辑

标记

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

组件

public onGenderChange() {
    switch(this.gender) {
        case 'm': 
           this.imageUrl = 'url1';
           break;
        case 'f';
           this.imageUrl = 'url2'
           break;
        default:
           this.imageUrl = 'defaultUrl';
           break;
    }
}