在 Angular 2 中不使用 ngFor 只显示第一个 x li

Question

我的模板中有 9 个<li> 元素，每个元素都有一个 *ngIf 条件。

其中 5 个可能返回 true 或更多或更少，但如果是这种情况，我只想显示前 4 个或更少。

<li>的顺序优先

我试过了：

// Template
<li *ngIf="checkCond(profile.Projects.length != 0)">Example</li>
... and so on...

// Component
shown: number = 0;

public checkCond(value: boolean): boolean {
    if (value) {
        this.shown += 1;
        return this.shown <= 4;
    }
    else return false;
}

我的方法的问题是if (value) 会持续触发，并且会像我预期的那样增加超过 9，因此最终它只会返回 false；

我不想使用 *ngFor

Answer 1

每次更改检测运行时都会调用checkCond()

而是将结果赋值给一个属性并绑定到该属性

constructor() { // or somewhere else
  this.checkCond(profile.Projects.length != 0);
}

cond:boolean;

public checkCond(value: boolean): boolean {
    if (value) {
        this.shown += 1;
        this.cond this.shown <= 4;
    }
    else this.cond = false;
}

<li *ngIf="cond">Example</li>