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

问题描述

我在IONIC Angular应用中显示ICON时遇到问题。 就我而言，我有1个或多个电话号码，我想通过图标提供直观的指示，例如家庭电话，移动电话等电话号码的类型。

 <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>

当我仅通过* ngif测试phone.type时，我有2个问题，但出现错误

我检查并加载了CommonModule。

还有什么最好的方法来检查phone.type的值并基于value设置特定的图标？会是

中的* ngif，并且仅在确定值p时才显示p？

解决方法

您的错误说明了一切：“ 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>