时间戳

首页 > 解决方案 > *ngif Angular 和 IONIC 5 的属性绑定错误

angular - *ngif Angular 和 IONIC 5 的属性绑定错误

问题描述

我在我的 IONIC Angular 应用程序中显示 ICON 时遇到问题。在我的情况下，我有 1 个或多个电话号码，我想通过图标提供一个视觉指示，它是什么类型的电话号码，例如 Home、Mobile 等。

 <ion-text *ngFor="let phone of contact.phones" color="medium">
    <div *ngif="phone.type === 'Mobile'">Hello</div>
      <p><b>({{phone.type}})<ion-icon ios="business" ></ion-icon></b> ({{phone.number | slice:0:3 }}) {{phone.number | slice:3:6 }}-{{phone.number | slice:6:10 }} </p>
 </ion-text>

我有 2 个问题，当使用通过 *ngif 测试 phone.type 时，我收到错误 在此处输入图像描述 ，我检查并加载了 CommonModule..

还有什么是检查 phone.type 值并根据 value 设置某个图标的最佳方法？它会是一个 *ngif 在

并且仅显示 p 如果它是某个值？

标签： angulariconic

解决方案

您的错误说明了一切：“ngif”不是 div 的已知属性。这是一个错字，而是使用：

*ngIf

（注意区分大小写的字符）

如果您有多种情况要分别切换样式或视图，则可以使用NgSwitch。

<container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

推荐阅读