Блог

Я пытаюсь найти значение индекса с помощью item- attached внутри item-0, item-1, item-2, item-3 , если кто-нибудь может помочь с решением для этого.

json:

 "ingredients": {
      "item-0": {
        "amount": "30",
        "measurement": "g",
        "item": "455"
      },
      "item-1": {
        "amount": "10",
        "measurement": "oz",
        "item": "455"
      }
      "item-2": {
        "amount": "1",
        "measurement": "lb",
        "item": "455"
      }
      "item-3": {
        "amount": "3",
        "measurement": "tsp",
        "item": "455"
      }
    },'
 

angular:

 <ul *ngFor="let item of recipe.ingredients; let i = index;">
    <li>{{recipe[i].amount}}</li>
    <li>{{recipe[i].measurement}}</li>
    <li>{{recipe[i].item}}</li>
</ul>
 

Я могу вернуть значение индекса только в виде числа, но мне нужно будет вернуть его как item-[i] .

 const keys = Object.keys(ingredients);
console.log(keys); // [ 'item-1', 'item-2', 'item-3'] 

// Getting the numbers from each key
const numbers = keys.map((key) => key.split('-')[1]);
console.log(numbers); // ['1', '2', '3'];
 

Вы можете использовать встроенное значение ключа канала для итерации по объекту: https://angular.io/api/common/KeyValuePipe .

Затем вы можете использовать item.key (чтобы получить ‘item-1’, ‘item-2’, ‘item-3’) и item.value получить доступ к данным:

 <ul *ngFor="let item of recipe.ingredients | keyvalue">
  <li>{{item.key}}</li>
  <li>{{item.value.amount}}</li>
  <li>{{item.value.measurement}}</li>
  <li>{{item.value.item}}</li>
</ul>
 

Вот рабочий пример: https://stackblitz.com/edit/angular-ivy-uavxyr?file=src/app/app.component.html