如何在angular 7中解析json？

Question

I have the following output from my node rest api :

{
    "workorder": [
        {
            "id": 1,
            "Workorderno": 110,
            "Nfno": 23,
            "Amount": 230,
            "Orderno": 34,
            "createdAt": "2019-03-02 00:19:49.495 +00:00",
            "updatedAt": "2019-03-02 12:40:36.647 +00:00"
        }
    ]
}

I want to read the output and display it in a table using angular 7 ? Could anyone guide me through as to do that? I tried making changes in my rest API, but it failed I could get the results

Answer 1

You need something like this using ngFor ,

<table class="table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Workorder No</th>
            </tr>
        </thead>
        <tbody>
           <tr *ngFor="let work of data.workorder">
            <td>{{work?.id}}</td>
            <td>{{work?.Workorderno}}</a></td>
           </tr>
        </tbody>
    </table>
</div>

and your Interface should be like this,

  export interface Workorder {
        id: number;
        Workorderno: number;
        Nfno: number;
        Amount: number;
        Orderno: number;
        createdAt: string;
        updatedAt: string;
    }

and then in your component,

  data : Workorder;
  constructor(private service: nowService) {

  }

  ngOnInit() {
    this.service.getAll().subscribe((data) => {
       this.data = data;
    })
  }
}

Answer 2

尝试添加到tr标签：ngIf =“ data.workorder！= null”