简体   繁体   English

如何操作在 angular 8 中使用密钥初始化的 json 到 ngFor

[英]How to manipulate json initialised with key into ngFor in angular 8

I have a json initialised with key(key can be change,its dynamic), I need to manupulate into ngFor as per the static html.I have already tried but not working so I commented.Value of 'mainitem' will come as a heading and key of 'Seconditem' will come inside li tag.Here is the code below and demo https://stackblitz.com/edit/angular-ufbwzw?file=src%2Fapp%2Fapp.component.ts我有一个用密钥初始化的 json(密钥可以更改,它是动态的),我需要按照 static html 将我的值作为标题来尝试,但我已经尝试了一个主标题,但我已经尝试了一个标题,但我已经尝试了标题'Seconditem' 的键将出现在 li 标签内。这是下面的代码和演示https://stackblitz.com/edit/angular-ufbwzw?file=src%2Fapp%2Fapp.component.ts

app.component.html app.component.html

<p>
    Start editing to see some magic happen :)
</p>

<!--<div>
    <ul>
        <ng-container *ngFor="let item of jsonarray">
            <h5>{{item.mainitem}}</h5>
            <li *ngFor="let subItem of item.Seconditem | keyvalue">
                {{subItem.key}} - {{subItem.value}}
            </li>
        </ng-container>
    </ul>
</div>
-->
<div>
        <ul>
            <h5>My item 1</h5>
            <li>createddate</li>
            <li>enddate</li>
            <h5>My item 2</h5>
            <li>origindate</li>
            <li>startdate</li>
        </ul>
    </div>

app.component.ts app.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  jsonarray = {
    "575": [
      {
        mainitem: "My item 1",
        Seconditem: {
          createddate: "30-01-02",
          enddate: "30-01-03"
        }
      },
      {
        mainitem: "My item 2",
        Seconditem: {
          origindate: "30-01-04",
          startdate: "30-01-05"
        }
      }
    ]
  };

  ngOnInit() {}
}
<ul>
        <ng-container *ngFor="let item of jsonarray | keyvalue">
           <ng-container *ngFor="let value of item.value">
            <h5>{{value.mainitem}}</h5>
            <li *ngFor="let subItem of value.Seconditem | keyvalue">
                {{subItem.key}} - {{subItem.value}}
            </li>
           </ng-container>
        </ng-container>
    </ul>

Working Stackblitz:- https://stackblitz.com/edit/angular-kfwv4m?file=src/app/app.component.html工作堆栈闪电战:- https://stackblitz.com/edit/angular-kfwv4m?file=src/app/app.component.html

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM