离子ng-if产生错误 - 离子3

Question

我正试图在api中实现离子应用中的产品类别.但实现相同时我得到以下错误

Error: Template parse errors:
Can't bind to 'ng-if' since it isn't a known property of 'div'."

这是代码:

  <div class="width50" *ngFor="let object of dataList">
    <div *ng-if= "{{object?.categories[0]?.slug}} == single">
    <img src="{{object.images[0].src}}" width="150"  (click)="navigateToPage(object.id)" />
    </div>
  </div>

当我打印{{object?.categories[0]?.slug}}代码的值工作正常并返回单.

使用*ngif over*ng-if似乎也不起作用,它显示以下错误.

`Template parse errors:
TypeError: key[0] is undefined ("
<ion-content padding>
  <div class="width50" *ngFor="let object of dataList">
    <div [ERROR ->]*ngIf= "{{object?.categories[0]?.slug}} == single">
    <img src="{{object.images[0].src}}" width="15"): ng:///AppModule/SinglePage.html@21:9
Can't bind to '*ngIf' since it isn't a known property of 'div'. "`

我相信这可能会发生,因为可能不是所有对象都有值是类别数组.那么有没有办法确保*ng-if= "{{object?.categories[0]?.slug}} == single"只有在确保类别数组非空后才检查条件？我们也可以在同一个div上同时拥有条件和循环吗？

Answer 1

你犯了一个错误,它应该是"*ngIf"而不是"ng-if",

替换这条线,

<div *ng-if= "{{object?.categories[0]?.slug}} == single">

同

<div *ngIf= "object?.categories[0]?.slug == single">

问题是你试图object?.categories[0]?.slug在*ngIf条件内插入一个字符串.删除花括号{{}},您的代码将运行正常