Question

假设我有一个带有单个属性的简单组件，它包含一组数字：

class AppComponent {
    numbers: number[] = [1, 2, 3, 4, 5]
}

我想显示除偶数之外的奇数。这是我目前拥有的模板：

<div *ngFor="let number of numbers">
    <div>
        <h1>Odd Numbers</h1>
        <ul></ul>
    </div>
    <div>
        <h1>Even Numbers</h1>
        <ul></ul>
    </div>
</div>

这些数字应列在li s中的ul个项目中。

此外，如果数组仅包含偶数，则不应显示第二个div。

如果不存储阵列的2个独立部分，这是否可行？

Answer 1

Check this out：

<div *ngFor="let number of numbers;let i = index">
    <div *ngIf="(number%2 !== 0)" id="odd">
        <h1 *ngIf="i===0">Odd Numbers</h1>
        <ul>{{number}}</ul>
    </div>
</div>

<div *ngFor="let number of numbers;let i = index">
    <div *ngIf="(number%2 === 0)" id="even">
        <h1 *ngIf="i===1">Even Numbers</h1>
        <ul>{{number}}</ul>
    </div>
</div>

我强烈建议你进一步打破html并创建child component，它可以处理数组逻辑并相应地进行渲染。

实现这样的逻辑会搞乱你的HTML代码。正如您所说，您不应该在具有number:number[]的组件本身上实现此逻辑。这是基于component的页面

的核心要素

Answer 2

鉴于你的标记，你似乎必须在单独的循环中处理数组的奇数和偶数元素。您可以在组件中为奇数和偶数设置getter，并在模板中使用它们。

组件：

setState

模板：

export class AppComponent {
  numbers: number[] = [1, 2, 3, 4, 5]

  get odds() {
    return this.numbers.filter( n => n % 2 == 1 )
  }

  get evens() {
    return this.numbers.filter( n => n % 2 == 0 )
  }
}

在模板

2 个答案: