使用 ngFor 从对象中获取子对象答案

【问题标题】：Get Child Object from Object using ngFor使用 ngFor 从对象中获取子对象
【发布时间】：2019-08-13 08:11:51
【问题描述】：

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

我想显示属性对象的子对象。喜欢： first_name, last_name, address , inside 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"
            }
          }
        },

    }

【问题讨论】：

标签： angular key-value ngfor

【解决方案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

【讨论】：