如何在角度表中打印具有多个值JSON数据的键?

时间:2019-04-10 14:53:09

标签: json angular typescript

我有一些数据,这些数据将以JSON格式从服务器接收,并且必须在表中显示。我正在解析收到的数据,并试图显示在表中。

到目前为止,我仅能将键显示为表标题,但无法显示与每一列关联的列值。

data = {"PassengerId":{"0":892,"1":893,"2":894,"3":895},"Pclass":{"0":3,"1":3,"2":2,"3":3},"Name":{"0":"Kelly, Mr. James","1":"Wilkes, Mrs. James (Ellen Needs)","2":"Myles, Mr. Thomas Francis","3":"Wirz, Mr. Albert"},"Sex":{"0":"male","1":"female","2":"male","3":"male"},"Age":{"0":34.5,"1":47.0,"2":62.0,"3":27.0},"SibSp":{"0":0,"1":1,"2":0,"3":0},"Parch":{"0":0,"1":0,"2":0,"3":0},"Ticket":{"0":330911,"1":363272,"2":240276,"3":315154},"Fare":{"0":7.8292,"1":7.0,"2":9.6875,"3":8.6625},"Cabin":{"0":null,"1":null,"2":null,"3":null},"Embarked":{"0":"Q","1":"S","2":"Q","3":"S"}}

我已经使用以下代码解析了密钥:

datakeys = Object.keys(this.data);

当我尝试将这些数据显示到表中时,我只能看到标题。我认为我以错误的方式编写了ng-repeat。

                    <table *ngIf="data">
                        <!-- ADD HEADERS -->
                        <tr>
                            <th *ngFor=" let tk of datakeys"> {{tk}} </th>
                          </tr>
                          <!-- BIND ARRAY TO TABLE -->
                          <tr ng-repeat="(k, v) in data">                                                        
                              <td ng-repeat="(k, v) in v">{{v}}</td>                                
                        </tr>

                    </table>

输出应为一个表,其中将包含列名及其值。例如:

PassengerId  #   Pclass  # .......
892                3     # .......
893                3     # .......
..................................
..................................

0 个答案:

没有答案