Question

下看到了这里

我似乎无法将其用于除文字以外的任何其他内容。

所以 html

  <ion-list>
      <ion-item *ngFor="let name of names"
                ion-text color="getSassColor(name)" 
                (click)="select(name)">
        {{name.name}}
      </ion-item>
  </ion-list>

TS

  private names = [
    { name : 'John',   selected:false},
    { name : 'Paul',   selected:false},
    { name : 'George', selected:false},
    { name : 'Ringo',  selected:false}
  ];
  ...
  select(selectedName) {
    this.names.forEach((n) => {
      if (n.name === selectedName.name) {
        n.selected = !n.selected;
      }
    });
  }
  getSassColor(name): string {
    console.log('in get sass')
    return name.selected ? 'primary' : '';
  }

如果要调整颜色，

永远不会调用 getSassColor（）。

“get sass”中的日志消息永远不会显示。

Answer 1

您可以使用[]绑定到属性，例如[propertyName] == bind-property-name

在您的示例中，您可以绑定color属性

<ion-list>
   <ion-item ion-text *ngFor="let name of names" (click)="select(name)"
       [color]="getSassColor(name)" >
       {{name.name}}
    </ion-item>
</ion-list>

Answer 2

你可以很容易地像下面那样做。我已经测试了以下代码，它运行正常。

重要提示：

1：如果您使用private文件中的.ts文件（template），则绝不能在html文件中使用AOT属性。否则，{{1}编译器将失败。

2：当您使用ion-text时，您需要为element提供name。因为您需要将其与div属性一起使用，您需要使用element比如.my-class { color: color($colors, primary); }或者跟它一样。

.scss

  <ion-list>
    <ion-item *ngFor="let name of names" (click)="select(name)">
      <div ion-text [ngClass]="{'my-class': name.selected }">{{name.name}}</div>
    </ion-item>
  </ion-list>

html的

python scriptname.py '/Desktop/testfile.txt'

离子文本颜色 - 这是一个只接受文字的错误吗？

2 个答案: