Question

我还是Angular的新人，所以请耐心等待。

我有一个包含Color-enum的TagComponent，并且有一个这样的颜色作为属性/字段。我希望Angular自动将此颜色添加为类，以便语义UI可以格式化该颜色。

我该怎么做？我尝试过ng-class，但它不接受ng-class =＆＃34; {{tag？.color}}＆＃34;。

// tag.model.ts

export class Tag {
    private _color: Tag.Color;
    private _name: string;

    constructor(color: Tag.Color, name: string){
        // checking name.length in the form!
        this._name = name;
        this._color = color;
    }

    get color() : Tag.Color {
        return this._color;
    }

    get name() : string {
        return this._name;
    }

}
export module Tag{
    export enum Color{
        Red,
        Orange,
        Yellow,
        Olive,
        Green,
        Teal,
        Blue,
        Violet,
        Purple,
        Pink,
        Brown,
        Grey
    }
}

// tag.component.html

<p class="ui pointing basic label">{{marker?.name}}</p>

Answer 1

你可以这样：

<p class="ui pointing basic label" [style.color]="marker.color">{{marker?.name}}</p>

有关更多示例，请查看此处： https://alligator.io/angular/style-binding-ngstyle-angular/

P.S。 ngClass用于CSS类的条件应用。例如，[ngClass]="{ 'colorClass': marker.name === 'bob'}"表示如果条件marker.name === 'bob'为true，则应用CSS类colorClass。

根据下面的评论，这是一个更相关的解决方案。

<p [class]="'ui pointing basic label ' + marker.color">{{marker?.name}}</p>

动态地将类添加到<span>，等于field / property

1 个答案: