Question

我正在尝试制作此页面： enter image description here

到目前为止，我可以制作上面的红色横幅和谷歌地图。以下是用于获取数据的api： http://test.poletalks.com/websites/getData

我创建了3个用于表示3个矩形的组件。我在第一个矩形中有解析错误。此文件使用

的数据

{"store":{"id":"58da327fa0358e186624b72daaa","name":"NIT, Calicut","store_type":"Education","description":"National Institute of Technology, Calicut is a leading institute of engineering and architecture in India. The motto of the institute is 'From Darkness, Lead us unto Light'","location":[75.9342274000001,11.3216676],"formatted_address":"National Institute Of Technology, Kattangal, Kerala, India","image":"http://res.cloudinary.com/poletalks/image/upload/v1472055369/Nitc_my3vig.jpg"}

我试图将第一个矩形表示为一个表格。但是我无法使用ngFor访问该对象。

details.component.html

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
    <table class="table" border="1">
      <tr *ngFor="let #item of stored">
      <td *ngFor="#key of c | keys">{{key}}:{{c[key]}}  </td>
      </tr>
    </table>
  </div>
</div>
</div>

我创建了一个将对象转换为数组的管道。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keypipe'
})
export class KeypipePipe implements PipeTransform {

  transform(value: any, args: string[]): any {
    let keys = [];
        for (let key in value) {
          keys.push(key);
        }
        return keys;
      }
    }
  //  return null;

但是我得到解析错误..请帮我实现这个页面。

Answer 1

在这种情况下，您实际上并不需要管道，在Object中有两个对象，因此您只需使用属性路径即可。首先要显示store的内容，请参阅以下内容：

<fieldset>
  <legend>{{stored?.store?.name}}</legend>
  <p>{{stored?.store?.description}}</p>
  <!-- rest of the properties -->
  <img src="{{stored?.store?.image}}" />
</fieldset>

请注意，我们使用safe navigation operator来保护null / undefined值。

然后在您的表格视图中，我们要访问store_admins的内容，因此您的表格应如下所示：

<table>
  <tr *ngFor="let admin of stored?.store_admins">
    <td>{{admin.login_id}}</td>
    <!-- rest of the properties -->
  </tr>
</table>

应该这样做！：）

这是

访问对象的键值

1 个答案:

Demo