离子条件无行改变

Posted 2023-03-13

【中文标题】离子条件无行改变

【英文标题】：Ionic conditional no-lines change

【发布时间】：2018-09-24 02:21:30

【问题描述】：

如何在 Ionic 中动态更改 no-lines 属性的值？

我试过了：

<ion-item [no-lines]='condition'> test </ion-item>

这给了我一个错误：

错误：模板解析错误： 不能绑定到“no-lines”，因为它不是“ion-item”的已知属性。 1. 如果 'ion-item' 是一个 Angular 组件并且它有 'no-lines' 输入，那么验证它是这个模块的一部分。 2. 如果 'ion-item' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 压制此消息。 3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 ("/div>

【参考方案1】：

<ion-item [attr.no-lines]='condition'> test </ion-item>

您需要[attr.no-lines] 而不是no-lines。此外，值得注意的是，如果要显示线条，则需要将表达式计算为 null 而不是 false。

<ion-header>
  <ion-navbar>
    <ion-title> appName  3.4.0</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-item>
    Item 1
  </ion-item>
  <ion-item no-lines>
    Item 2
  </ion-item>
  <ion-item [attr.no-lines]="null">
    Item 3
  </ion-item>
  <ion-item [attr.no-lines]="true">
    Item 4
  </ion-item>
  <ion-item [attr.no-lines]="false">
    Item 5
  </ion-item>
</ion-content>

上面的第 1 项和第 3 项有行，第 2、4 和 5 项没有。

【参考方案2】：

您可以使用以下方法向元素添加其他属性：

<div [attr.no-lines]='yourExpression'></div>