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

【问题标题】：*ngif property binding error with Angular and IONIC 5*ngif Angular 和 IONIC 5 的属性绑定错误
【发布时间】：2020-11-30 13:02:20
【问题描述】：

我在 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 如果它是某个值？

【问题讨论】：

这是*ngIf，而不是*ngif。
第二个问题可以使用ngSwitch。

标签： angular iconic

【解决方案1】：

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

【讨论】：