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

如果你想使用这种类型的硬编码，我认为你应该在你的组件中创建一个数组和迭代器，例如。

someArray: boolean[] = [true, true, true, false, false, false];
someIterator: number = 0;

并在您的HTML代码中：

...<li *ngIf="someArray[someIterator]">Example 1</li>
{{someIterator = someIterator + 1}}
<li *ngIf="someArray[someIterator]">Example 2</li>
{{someIterator = someIterator + 1}}...

但它非常脏的解决方案。对于这种情况，有NgFor。

对我来说，最后一个想法是使用@ViewChildren或@ContentChildren。你试过吗？

Answer 2

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

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>

在Angular 2

2 个答案: