angular - 使用 ngFor 从对象中获取子对象

Question

使用 ngFor 从对象中获取子对象，

我想显示属性对象的孩子。比如：first_name、last_name、address、内部地址，我们有 street_1、street_2 等，使用 ngFor

HTML：

<div *ngIf="!!JsonSchema">
<div *ngFor="let field of JsonSchema.properties"> {{field | json}}</div>
</div>

TS：

JsonSchema = {
      "type": "object",
      "properties": {
        "first_name": {
          "type": "string"
        },
        "last_name": {
          "type": "string"
        },
        "address": {
          "type": "object",
          "properties": {
            "street_1": {
              "type": "string"
            },
            "street_2": {
              "type": "string"
            },
            "city": {
              "type": "string"
            },
            "state": {
              "type": "string",
            },
            "zip_code": {
              "type": "string"
            }
          }
        },

    }

标签： angularkey-valuengfor

Answer 1

你可以试试：

<div *ngFor="let item of JsonSchema.properties | keyvalue">
    <li>{{item.key}}</li>
    <ul *ngFor="let element of item.value | keyvalue">
      <li>{{element.key}}</li>
      <ul *ngIf="element.key === 'type'">
        <li>{{element.value}}</li>
      </ul>
      <ul *ngIf="element.key === 'properties'">
        <ul *ngFor="let elem of element.value | keyvalue">
          <li>{{elem.key}}-->{{elem.value.type}}</li>
        </ul>
      </ul>
    </ul>
</div>

演示