Angular-元素的Conditional属性

Question

我使用的是基于Bootstrap网格系统的离子网格。以下是我用于不同元素范围的代码的简化版本：

<ion-grid>
<ion-row *ngFor="let task of allTasks">
<ion-col *ngIf="task.author === this.currentUser" offset-3 col-9 class="task">
<div>{{task.description}}</div>
</ion-col>
</ion-row>                                                              
</ion-grid>

我的离子网格有12列。CCD_ 1基本上将该元素推送到列的最右边部分。然而，我希望通过两种方式有条件地更改此属性：

1. 如果特定条件成立，请不要将offset-3应用于此元素。什么是正确的语法：myCondition ? "offset-3" : ""

2. 如何动态更改offset-{value}？假设我将col-auto分配给上面的元素，我如何更改offset-{value}的{value}，使其不小于3或更大？例如，col-auto将col-6分配给元素，将offset-{value}更改为offset-30，或者简单地将元素推到列的最右侧。

我不确定2.是否真的可以实现，但任何能得到我想要的相同结果的变通方法对我来说都足够了。

Answer 1

在组件中创建一个@input属性，然后可以将值传递给html；偏移量｛｛inputValue｝｝只是可能在你的组件中做更多的逻辑。并将该值传递给html，以便在html中设置值之前检索该值。

示例；

your components.ts;
@Input() value: string;

You create a new method lets say;
getOffsetValue() {
if (x === foo) {
this.value = '1';
}else {
this.value = '2';
}
return this.value
}
ngOnInit()
// call method
getOffsetValue();
So now you have a data on the value attribute
in your HTML;
offSet{{this.value}}