简体   繁体   English

离子条件线变化

[英]Ionic conditional no-lines change

How can I change the value of no-lines property dynamically in Ionic? 如何在Ionic中动态更改no-lines属性的值?

I have tried: 我努力了:

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

This gives me an error: 这给我一个错误:

Error: Template parse errors: Can't bind to 'no-lines' since it isn't a known property of 'ion-item'. 错误:模板解析错误:无法绑定到“无行”,因为它不是“ ion-item”的已知属性。 1. If 'ion-item' is an Angular component and it has 'no-lines' input, then verify that it is part of this module. 1.如果“ ion-item”是Angular组件,并且具有“ no-line”输入,则请验证它是否是此模块的一部分。 2. If 'ion-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 2.如果“ ion-item”是Web组件,则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 3.要允许任何属性,请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。 ("/div> (“/ DIV>

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

You need [attr.no-lines] instead of no-lines . 您需要[attr.no-lines]而不是no-lines Also, it's worth noting if you want lines to appear, you need the expression to evaluate to null not false . 另外,值得注意的是,如果您希望显示行,则需要将表达式评估为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>

Items 1 and 3 above have lines and items 2, 4, and 5 do not. 上面的项目1和3有行,而项目2、4和5没有。

在此处输入图片说明

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM