-1

我正在使用 PrimeNG 开发 Angular 应用程序。我在问我是否可以根据属性的值有条件地添加 PrimeNG 组件属性。在我的 HTML 页面中，我有这样的内容：

<span [ngClass]="{'isMobileCalendar' : (isMobile2 | async)}">
    <p-calendar monthNavigator="true" 
                yearRange="1990:2060" 
                yearNavigator="true" 
                formControlName="date"
                [touchUI]="true"
                [style]="{'width':'85%'}">
    </p-calendar>     
</span>

正如我目前所看到的，我将此属性设置为 true：[touchUI]="true"。我还在 Angular 组件中定义了这个(isMobile2 | async)变量，并使用 |async 获得。

我需要实现以下行为：

  • 如果(isMobile2 | async)值为true --> 设置：[touchUI]="true"
  • 如果(isMobile2 | async)值为false --> 设置：[touchUI]="false"

是否可以内联实现此行为以使用ngIf并定义两次p 日历组件（基于isMobile2 | async值的值）？如果它可以内联完成，那就太好了

4

2 回答 2

0

是的，但是由于 observable 的发射是布尔值，因此您需要使用 aTemplateRef动态发送值并重用它。

<ng-container *ngTemplateOutlet="template; context: {$implicit: (isMobile2 | async)}"></ng-container>

<ng-template #template let-isMobile2>
<!-- 
`isMobile2` here is local scoped to `ng-template` and refers to the declaration in `let-isMobile2`. 
For the record it could take other names as well. 
Eg. `let-myCondition` - in this case, the binding would be `[class.isMobileCalendar]="myCondition"` and `[touchUI]="myCondition"`
-->

  <span [ngClass]="{'isMobileCalendar' : isMobile2}">
    <p-calendar monthNavigator="true" 
                yearRange="1990:2060" 
                yearNavigator="true" 
                formControlName="date"
                [touchUI]="isMobile2"
                [style]="{'width':'85%'}">
    </p-calendar>     
  </span>
</ng-template>

对于有条件地应用单个类，您还可以尝试以下方法而不是ngClass

<span [class.isMobileCalendar]="isMobile2">
  ...
</span>
于 2021-06-08T10:20:10.147 回答
0

你试过下面吗？

<span [ngClass]="{'isMobileCalendar' : (isMobile2 | async)}">
    <p-calendar monthNavigator="true" 
                yearRange="1990:2060" 
                yearNavigator="true" 
                formControlName="date"
                [touchUI]="(isMobile2 | async)"
                [style]="{'width':'85%'}">
    </p-calendar>     
</span>

编辑1： 这个怎么样？

 <ng-container *ngIf="{isMobile:(isMobile2 | async)} as pageState">
    <span [ngClass]="{'isMobileCalendar' : pageState.isMobile}">
        <p-calendar monthNavigator="true" 
                    yearRange="1990:2060" 
                    yearNavigator="true" 
                    formControlName="date"
                    [touchUI]="pageState.isMobile"
                    [style]="{'width':'85%'}">
        </p-calendar>     
    </span>
 </ng-container>
于 2021-06-08T10:11:48.837 回答