根据动态数据设置ngStyle

Question

我有一个包含路径元素的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来设置shirts

的值

我的问题是，在显示SVG时，shirts的值为空。稍后一小段时间setShirts开始，shirts被设置为颜色数组。

如果myStyle设置了颜色，我如何让shirts检查setShirts？

Answer 1

您可以在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中导入ChangeDetectorRef

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

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

constructor(private ref: ChangeDetectorRef) { 
}

最后

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