Блог

Объект имеет 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»
, и я хочу, чтобы они были пронумерованы нормально, независимо от того, какие свойства существуют или нет, я хочу иметь кнопку 1, затем 2, затем 3…

В случае, если ширина не существует, я хочу иметь кнопку 1 для высоты и кнопку 2 для веса.

Теперь я знаю, как это сделать с помощью jQuery, для итерации и заполнения промежутков с помощью класса buttonNr, считая от 1 до конца. Но я бы хотел сделать это угловым способом, без 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>
 

Если вы хотите четко указать порядок кнопок, вы можете определить 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>
 

Ваше решение может выглядеть следующим образом

 <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/app/app.component.html