遍历对象数组并在 Angular 12 中的 ngFor 中显示每个对象的键和值

Question

在 Angular 12 应用程序中，从 API 返回的数据是

data = {
  "options":[
     {
       "Yes": 1
     },
     {
       "No": 0
     }
  ]
}

我的要求是遍历此数组并在 html 中动态显示单选按钮，如下所示。

<div *ngFor="let option of data.options;">
  <input type="radio" class="form-control" name="rdgroup" value="{{option.key}}">
  <label>{{option.value}}</label>
</div>

我希望单选按钮的显示标签为 'Yes' 和 'No'，它们的值应分别为 1 和 0。当前没有任何显示。我该如何解决？

Answer 1

你可以这样尝试，它可能会帮助你得到预期的输出！

编辑您的 component.ts 文件，并添加以下定义的方法。

getEntrires(object: any) {
    return Object.entries(object);
}

此方法将 return 您 对象条目 与数组

中的 KEY & VALUE

例如：

let output = getEntrires({"Yes": 1});
console.log(output) //  [Array[2]] => it will be two dimensional array

现在在您的 html 中，您可以通过这种方式使用它

<div *ngFor="let option of data.options;">
  <input type="radio" class="form-control" name="rdgroup" value="{{getEntrires(option)[0][1]}}">
  <label>{{getEntrires(option)[0][0]}}</label>
</div>

Answer 2

您需要修改数据才能呈现单选按钮。

检查这个 stackblitz：https://stackblitz.com/edit/angular-material-with-angular-sidenav-spz9oq?file=app/app.component.html

在您的组件上使用以下方法：

   options = this.data.options.map( (op) => {
     const key = Object.keys(op)[0];
      return {
        "value" : Object.keys(op)[0],
        "key": op[key]
      }
  });

并在模板中

<div *ngFor="let option of options;">
<input type="radio" class="form-control" name="rdgroup" value="{{option.key}}">
<label>{{option.value}}</label>
</div>

遍历对象数组并在 Angular 12 中的 ngFor 中显示每个对象的键和值

Iterate over array of objects and display key and value for each object in ngFor in Angular 12

html

radio-button

ngfor

angular