代码之家 › 专栏 › 技术社区 › Chris

基于动态数据的ngstyle设置

angular

Chris · 技术社区 · 6 年前

我有一个包含path元素的svg。我希望根据名为 shirts .

<path class="st2" style="stroke-width:2.0;" [ngStyle]="myStyle(4)" d="M11.5,315....315.9z"/>

我的 myStyle 功能是:

myStyle(p): Object {
    return {
        fill: this.shirts[p]
    }
}

在我的组件中,我有:

shirts: any = [];

setShirts(shirts) {
    this.shirts = shirts;
}

我正在打电话 setShirts 设置的值 衬衫

我的问题是,在SVG显示时 衬衫 是空的。一秒钟后 衬衣 踢进 衬衫 设置为一系列颜色。

我如何得到 我的风格 检查 衬衫 只有在颜色由 衬衣 ?

1 回复 | 直到 6 年前

Prachi 6 年前

您可以在ngoninit()中调用函数,也可以尝试:

在HTML中:

<path *ngIf="isListLoaded" class="st2" style="stroke-width:2.0;" [ngStyle]="myStyle(4)" d="M11.5,315....315.9z"/>

在TS中:

isListLoaded :any = false;

setShirts(shirts) {
    this.shirts = shirts;
    this.isListLoaded = true;
}

更新的 :

在player.ts中导入changedectorref

import { ChangeDetectorRef } from '@angular/core';

在player.ts中注入并实例化它

constructor(private ref: ChangeDetectorRef) { 
}

最后

setShirts(shirts) {
    this.shirts = shirts;
    this.isListLoaded = true;
    this.ref.detectChanges();
}

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前