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>