Angular - 在没有 jQuery 的情况下迭代和计算元素

如何解决Angular - 在没有 jQuery 的情况下迭代和计算元素

对象有 3 个属性：

public obj;

...

this.obj = {
  height: 10,width: 20,weight: 30
};

然后我将按钮与这些属性绑定，但我想计算按钮并仅在属性值存在时才显示它们：

<button *ngIf="obj.height"> Button <span class="buttonNr">1</span> </button>
<button *ngIf="obj.width"> Button <span class="buttonNr">2</span> </button>
<button *ngIf="obj.weight"> Button <span class="buttonNr">3</span> </button>

但是，如果说缺少宽度，我会得到“按钮 1”和“按钮 3” 并且我希望它们能够正常编号，无论是否存在哪些属性，我都希望有 Button 1 然后 2 然后 3 ...

如果宽度不存在，我希望按钮 1 表示高度，按钮 2 表示重量。

现在我知道如何使用 jQuery 来迭代和填充具有从 1 到结束计数的 buttonNr 类的跨度。 但我想用 Angular 的方式来做，没有 jQuery。

---

编辑： 对不起，当我看到第一个答案时，我意识到我过于简化了我的例子：有各种各样的对象。 所以想象一下还有

public data;
public book;
...
this.data = {
  color: 'blue',price: 100
}
this.book = {
  title: 'a',author: 'b'
}

然后我只是继续添加按钮，但它们的显示也取决于。

<button *ngIf="data.color"> Button <span class="buttonNr">4</span> </button>
<button *ngIf="data.price"> Button <span class="buttonNr">5</span> </button>
<button *ngIf="book.title"> Button <span class="buttonNr">6</span> </button>
<button *ngIf="book.author"> Button <span class="buttonNr">7</span> </button>

解决方法

您的解决方案可能如下所示

<button *ngFor="let key of obj | keyvalue; let i = index">
   Button <span class="buttonNr">1</span>
</button>

让我解释一下这里发生了什么

1. *ngFor 是为集合中的每个项目呈现模板的指令
2. keyvalue 是一个特殊的管道，允许遍历对象属性
3. let i = index - 将迭代索引导出到 i 变量

更新

根据更新的答案，我已经将我的解决方案更新为包括累积计数器在内的多个对象

在这里你可以找到一个简单的例子：https://stackblitz.com/edit/angular-ivy-qn8x38?file=src%2Fapp%2Fapp.component.html

,

如果你想明确按钮的顺序，你可以在组件上定义一个 getButtons() 方法：

getButtons() {
  return [
    this.data?.color,this.data?.price,this.book?.title,this.book?.author
  ].filter(val => val !== undefined);
}

该方法采用所有按钮的理想顺序，然后过滤掉不存在的值。

然后你只需在模板中迭代结果：

<button *ngFor="let value of getButtons(); let i = index">
   Button <span class="buttonNr">{{i + 1}}</span>
</button>