Angularjs 如何使用ng2 dnd包从json而不是数组中读取数据？

我用一个简单的html5包在列表上拖放来排序

我只能从数组中找到填充列表的方法，我需要从JSON中找到它

这是我的代码：

import { Component } from '@angular/core';

import { DND_DIRECTIVES } from 'ng2-dnd/ng2-dnd';

import { Report } from "./Report";

@Component({
    selector: 'my-app',
    styleUrls: ['style.css'],
    directives: [DND_DIRECTIVES],
    template: `
    <h1 align="center">{{title}}</h1>
    <h2>list of reports:</h2>
    <div dnd-sortable-container [sortableData]="reports">
    <div *ngFor="let rep of reports; let i=index" dnd-sortable [sortableIndex]="i">
    ID:{{rep.id}} <p></p> Name:{{rep.name}}
    </div>
    <div>{{reports | json}}</div>
    `
})

export class AppComponent {

    title = 'Reorder List';

    reports = [
        new Report(1, 'Italy'),
        new Report(2, 'Spain'),
        new Report(3, 'Italy'),
        new Report(4, 'Spain'),
        new Report(5, 'Netherlands'),
        new Report(6, 'Italy')
    ];
}

从'@angular/core'导入{Component}；
从“ng2 DND/ng2 DND”导入{DND_指令}；
从“/Report”导入{Report}；
@组成部分({
选择器：“我的应用程序”，
样式URL:['style.css']，
指令：[DND_指令]，
模板：`
{{title}}
报告清单：
ID:{{rep.ID}Name:{{rep.Name}
{{报告| json}
`
})
导出类AppComponent{
标题='重新排序列表'；
报告=[
新报告（1，“意大利”），
新报告（2，“西班牙”），
新报告（3，“意大利”），
新报告（4，“西班牙”），
新报告（5，“荷兰”），
新报告（6，“意大利”）
];
}

如果有人知道如何使用它从报表的JSON获取数据，而不是从报表数组获取数据，它将真正帮助我：）

---

谢谢

假设您返回的数据是一个JSON数组，您可以使用map函数返回一个Report数组，如下所示：

var data = [{id: 1 , name:"Italy"}, {id: 2 , name:"Viet Nam"}];
var reports =     data.map(x=> new Report(x.id, x.name));