*ngif 属性 与 Angular 和 IONIC 5 的绑定错误
*ngif property binding error with Angular and IONIC 5
我 运行 在我的 IONIC Angular 应用程序中显示图标时遇到问题。
在我的例子中，我有 1 个或多个 phone 号码，我想通过图标提供视觉指示 Phone 号码的类型，例如家庭、手机等
<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 的值并根据值设置特定图标的最佳方法是什么？它会是
中的 *ngif 并且仅在它是某个值时才显示 p 吗？
您的错误说明了一切：“ngif”在 div 中 属性 未知。
这是一个错字，请改用：
*ngIf
（注意 case-sensitive 个字符）
如果您有多种情况需要分别切换样式或视图，可以使用 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>
我 运行 在我的 IONIC Angular 应用程序中显示图标时遇到问题。 在我的例子中，我有 1 个或多个 phone 号码，我想通过图标提供视觉指示 Phone 号码的类型，例如家庭、手机等
<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 时出现错误
此外，检查 phone.type 的值并根据值设置特定图标的最佳方法是什么？它会是
中的 *ngif 并且仅在它是某个值时才显示 p 吗？
您的错误说明了一切：“ngif”在 div 中 属性 未知。 这是一个错字，请改用：
*ngIf
（注意 case-sensitive 个字符）
如果您有多种情况需要分别切换样式或视图，可以使用 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>