Angular 图像赢得'；t在更改ts文件中的值后更改

我有一个模型，它的属性之一是枚举。 我想相应地显示一个图像，因此，如果属性（

Category

）是音乐，我想显示一个音乐图像

这是我的

.ts

文件：

export class GoalCardComponent implements OnInit {

  @Input() goal: Goal;
  private iconName: string = "default";
  imgSrc: string = `/assets/category-icons/${this.iconName}.png`;

  private categories: string[] = Object.values(Category);
  constructor() { }

  ngOnInit() {
    if(this.goal.category != null && this.categories.includes(this.goal.category)) {
        this.iconName = this.goal.category
    }
  }

}

<ion-card>
  <ion-row class="goal-card-container">
      <ion-avatar class="goal-card-category-img" style="background-color: aquamarine; display: flex; justify-content: center; align-items: center;">
        <ion-img [src]="imgSrc" style="width: 90%; height: 90%;"></ion-img>
      </ion-avatar>
      <div class="goal-info-container">
        <ion-label class="goal-title-name">{{ goal.title }}</ion-label>
      </div>

      <a class="details-button"></a>
  </ion-row>
</ion-card>

我将我的

iconName

设置为默认值，以防我没有类别属性（在模型中是可选的）

问题是我的

.html

文件不会相应更改，它仍然是

default.png

，尽管我选择了一个类别

这是我的

.html

文件：

export class GoalCardComponent implements OnInit {

  @Input() goal: Goal;
  private iconName: string = "default";
  imgSrc: string = `/assets/category-icons/${this.iconName}.png`;

  private categories: string[] = Object.values(Category);
  constructor() { }

  ngOnInit() {
    if(this.goal.category != null && this.categories.includes(this.goal.category)) {
        this.iconName = this.goal.category
    }
  }

}

<ion-card>
  <ion-row class="goal-card-container">
      <ion-avatar class="goal-card-category-img" style="background-color: aquamarine; display: flex; justify-content: center; align-items: center;">
        <ion-img [src]="imgSrc" style="width: 90%; height: 90%;"></ion-img>
      </ion-avatar>
      <div class="goal-info-container">
        <ion-label class="goal-title-name">{{ goal.title }}</ion-label>
      </div>

      <a class="details-button"></a>
  </ion-row>
</ion-card>

{{goal.title}}

---

我的猜测是，

iconName

仅在页面已经显示后才被更新，但我认为

[src]

应该将源代码绑定到

imgSrc

，因此当它更改时，应该刷新页面，但这不起作用。

您应该在ngonit上更新imgSrc，如下所示：

export class GoalCardComponent implements OnInit {

  @Input() goal: Goal;
  private iconName: string = "default";
  imgSrc: string = `/assets/category-icons/${this.iconName}.png`;

  private categories: string[] = Object.values(Category);
  constructor() { }

  ngOnInit() {
    if(this.goal.category != null && this.categories.includes(this.goal.category)) {
        this.iconName = this.goal.category;
        this.imgSrc = `/assets/category-icons/${this.iconName}.png`;
    }
  }

}

或者，每次

目标

值更改时，您可以使用目标更新

imgSrc

，这将是一个更稳健的解决方案：

export class GoalCardComponent implements OnInit {

  @Input() 
  set goal(goal: Goal) {
      this.goal = goal;
      if(this.goal.category != null && this.categories.includes(this.goal.category)) {
        this.iconName = this.goal.category;
        this.imgSrc = `/assets/category-icons/${this.iconName}.png`;
      }
  }

  private iconName: string = "default";
  private _goal: Goal;

  imgSrc: string = `/assets/category-icons/${this.iconName}.png`;

  private categories: string[] = Object.values(Category);

}

---

谢谢，它确实有用。我以为当iconName更新时imgSrc会更新，我想不是。谢谢大家!@JohnDoah替代方案您可以在typescript中使用setter来获得更健壮的解决方案。查看我的更新以获得更多信息。非常感谢！我来看看。