Question

我有两种不同的响应，一种是我们需要在对象上循环以显示正确的响应。另一个，我们只显示变量。

我尝试过的是ng-if else，但是它不起作用。

关于这段代码：

<div *ngFor="let courseTimeslot of course?.timeslots">
     <div *ngIf="courseTimeslot; else timeslot" class="timeslots s-padding-l">
        {{ courseTimeslot.timeslot }}
      </div>
</div>

<ng-template #timeslot *ngIf="course?.timeslots" class="timeslots s-padding-l">{{ course?.timeslots }}</ng-template>

这是正确的方法吗，否则我想听听其他选择。

Answer 1

您可以检查对象是否为数组

<div *ngIf="Array.isArray(course?.timeslots)">
    <div *ngFor="let courseTimeslot of course?.timeslots">
        <div *ngIf="courseTimeslot" class="timeslots s-padding-l">
            {{ courseTimeslot.timeslot }}
        </div>
    </div>
</div>
<div *ngIf="!Array.isArray(course?.timeslots)">
    <ng-template #timeslot *ngIf="course?.timeslots" class="timeslots s-padding-l">{{ course?.timeslots }}</ng-template>
</div>

您需要在组件中

Array = Array;

Answer 2

您只能借助组件方法来实现。

<ng-container *ngIf="course?.timeslots && checkType(course.timeslots);else timeslot">
   <div *ngFor="let courseTimeslot of course.timeslots" class="timeslots s-padding-l">{{ courseTimeslot.timeslot }}
   </div>
</ng-container>

<ng-template #timeslot *ngIf="course?.timeslots" class="timeslots s-padding-l">{{ course?.timeslots }}</ng-template>

组件：

checkType(dataItem){
   return typeof dataItem === "object" && dataItem.length > 0;
 }

如何检查是否需要遍历变量

2 个答案: