ion-text color - 它是一个只接受文字的错误吗？

Question

我正在寻找Ionic Typeography

我似乎无法得到它的文字以外的任何东西。

所以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（），如果你想调节颜色。

日志消息'in 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

你可以做到这一点很容易地像below.I有下面的代码测试它工作正常。

重要提示：

1：如果你使用那些对template文件必须从不使用.ts文件中private性能（即html）。否则，AOT编译器将失败。

2：当你使用ion-text你需要给一个element到it.Since你需要与你的name财产使用它，你需要使用div像element否则它。

.scss

.my-class { 
    color: color($colors, primary); 
} 

的.html

<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>