从 Angular 中的函数返回多个值，并在 HTML div 标记中使用这些值。返回值不能分配给 TS 文件中的变量

Question

我有一个函数，它返回一个字符串，一个css类和一个布尔值，如[false, green_box]。我想利用这个值在下面的HTML，但不幸的是，我不能这样做。我如何访问这些值?由于该函数在HTML文件中被多次调用，所以我不能在typescript文件中的变量中赋值。

请注意，我可以使用不同的函数返回布尔值，但目标是找到一种在HTML中利用函数返回的多个值的方法。

下面是我的HTML

<div *ngIf="getClass('investing', 'plan')[0]"
class="prio_box dnd_move"
data-drag="list-1"
data-drag-index="0">
<span [ngClass]="getClass('investing', 'plan')[1]" 
class="dnd_move clr-box">
</span>
<span class="drag_content dnd_move">Plan</span>
</div>

这是我的函数，

getClass(component: string, value: any) {
component = component.toLowerCase();
value = value.replace(/s/g, "");
let pathValue = this.control[component]
? this.control[component.toLowerCase()][value]
: null;
this.allGreen.add(pathValue);
return [pathValue == Status.Yes
? "green_box"
: pathValue == Status.DontKnow
? "yellow_box"
: "red_box",
pathValue == Status.Yes
? false
: pathValue == Status.DontKnow
? true
: true];
}

Answer 1

试着这样做:

<ng-container *ngIf="getClass('investing', 'plan') as class">
<div *ngIf="class[0]"
class="prio_box dnd_move"
data-drag="list-1"
data-drag-index="0">
<span class="dnd_move clr-box {{class[1] || ''}}">
</span>
<span class="drag_content dnd_move">Plan</span>
</div>
</ng-container>

使用这种方式，可以防止函数被多次调用。