イオンテキストの色 - それはリテラルだけを受け入れるバグですか？

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'は表示されません。あなたはあなたの例に[propertyName] == bind-property-name

のように、プロパティにバインドする[]を使用することができます

Answer 1

、あなたは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ファイル（すなわちhtml）.Otherwise上のものを使用している場合、AOTコンパイラは失敗します.tsファイル内privateプロパティを使用してはなりません。

2：あなたはion-textを使用する場合、あなたはあなたがdivelementようさもなければそれを使用する必要があなたのnameプロパティでそれを使用する必要がit.Sinceするelementを与える必要があります。

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

.scss

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