Question

好吧，所以我有一个从API发送的对象数组，它显示索引位置，但我希望对象键和值而不是索引位置，我认为Im映射对象键错误，有人可以帮忙吗

getFav(): void {
  this.Shared.getFav().subscribe(

    data => {
      this.fave = data.message;
      Object.keys(this.fave).map((keyName) => {
        return {id: keyName, product: this.fave[keyName]};
      });
    }
  );
 }

<div class="uk-width-small" uk-dropdown>
          <div class="uk-dropdown-grid uk-child-width-1-1@m" uk-grid>
          <div *ngFor="let fav of fave | keyvalue" >
            <span>{{fav.value}}</span>
            <span>{{fav.key}}</span>
      <a href="{{fav.key}}"><li>Buy On amazon<br/>
      </li></a>
    </div>
  </div>
</div>

这是来自我的API的响应，因此我必须在后端更改某些内容，还是可以在前端进行更改，以便它只显示标题键和值

Answer 1

问题是您在整个数组上使用了Object.keys()，它没有任何键，因此只给您返回索引和对象。您需要对数组中的每个对象执行此操作，以使其按您希望的方式工作。

Answer 2

也许您需要更改此功能getFav

let newFaves=[]; //declare global var like this on the top of ts file

getFav(): void {
  this.Shared.getFav().subscribe(
    data => {
      this.fave = data.message;
      this.newFaves =this.fave.map((item) => {
        return {id: item.id, product: item.title};
      });
    }
  );
 }

然后在您的html中

<div class="uk-width-small" uk-dropdown>
          <div class="uk-dropdown-grid uk-child-width-1-1@m" uk-grid>
          <div *ngFor="let fav of newFaves | keyvalue" >
            <span>{{fav.value}}</span>
            <span>{{fav.key}}</span>
      <a href="{{fav.key}}"><li>Buy On amazon<br/>
      </li></a>
    </div>
  </div>
</div>

Answer 3

fav.value是一个对象！您仍然必须确定要退还的钥匙可能是：fav.value.id或fav.value.title

<div class="uk-width-small" uk-dropdown>
    <div class="uk-dropdown-grid uk-child-width-1-1@m" uk-grid>
        <div *ngFor="let fav of fave | keyvalue" >
            <span>{{fav.value.title}}</span>
            <span>{{fav.key}}</span>
            <a href="{{fav.key}}">
                <li>Buy On amazon<br/></li>
            </a>
        </div>
    </div>
</div>

Answer 4

使用keyvalue管道，您无需更改getFav。

来自keyvalue的

值是所有对象(e.g {id: 20, title: '...', image: '...'})

所以您必须告诉您要使用的角度巫婆属性。

 <span>{{fav.value.id}}</span>
 <span>{{fav.value.title}}</span>
 <img [src]="fav.value.image"/>

显示[对象] [对象]的HTML

4 个答案: