Question

请您描述一下如何在有条件的情况下更改离子图标。例如，如果性别是男性，我要“男人”图标，如果性别是女性，则要“女人”图标：

Answer 1

因此离子图标具有这样的图标：

<ion-icon name="man"></ion-icon>
<ion-icon name="woman"></ion-icon>

来源：https://ionicframework.com/docs/ionicons/

要使其成为条件，您需要创建一个从模板到定义其“男”或“女”的变量的绑定：

<ion-icon [name]="variableThatDefinesGender"></ion-icon>

然后在ts文件的模板中，您可以分配相关值（男人或女人）。伪代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'page-some',
  templateUrl: 'some.html'
})
export class SomePage {

  variableThatDefinesGender: string;

  constructor(
  ) {
    // initial value:
    this.variableThatDefinesGender = "woman";
  }

  someMethod(condition) {
      if (condition === "woman") {
          this.variableThatDefinesGender = "woman"
      } else {
          this.variableThatDefinesGender = "man"
      }
  }

}

离子图标的条件外观

1 个答案: