使用ngFor

Question

使用ngFor从对象获取子对象

我想显示属性对象的子对象。 喜欢 ： first_name，last_name，address，内部地址，我们使用ngFor

分别为street_1，street_2等

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"
            }
          }
        },

    }

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>

demo